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

218 阅读 0 评论 144 点赞

我是靠谱客的博主勤恳吐司，最近开发中收集的这篇文章主要介绍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); 
} 

} 