js event事件的传递与冒泡处理

复制代码代码如下:

 
<div> 
 
<table nclick="gotClick(event,'table',this)" id="table"> 
 
<tr nclick="gotClick(event,'tr',this)" id="tr"> 
 
<td nclick="gotClick(event,'td',this)" id="td"> 
 
<input type="button" name="button" value="单击我" 
 
onclick="gotClick(event,'按钮',this);" id="button"> 
 
</td> 
 
</tr> 
 
</table> 
 
</div> 
 
<div id='result'> 
 
</div>

js文件

复制代码代码如下:

 
function gotClick(event,msg,obj){ 
 
var object; 
 
var msgs = msg+" => 被单击了!<br/>"; 
 
try{ 
 
if (event.target) {//Mozilla 
 
object = event.target; 
 
// alert(document.getElementById(object.id).nodeName+" Mozilla "+msg); 
 
document.getElementById('result').innerHTML +=msgs; 
 
// event.cancelBubble=true;//阻止传递 
 
} 
 
else if(event.srcElement){//IE 
 
object = event.srcElement; 
 
// alert(object.id+" IE "+msg); 
 
// event.cancelBubble=true;//阻止传递 
 
document.getElementById('result').innerHTML +=msgs; 
 
} 
 
}catch(e){ 
 
alert(e); 
 
} 
 
}

运行结果是:

按钮 => 被单击了!
td => 被单击了!
tr => 被单击了!
table => 被单击了!

频道导航

js event事件的传递与冒泡处理

您可能感兴趣的文章: