JavaScript事件冒泡机制与跨浏览器兼容性处理

作者：窗边听雨

时间：2026-10-25

本文通过HTML嵌套结构与JavaScript代码示例，详细解析了DOM事件冒泡机制。重点对比了Mozilla标准浏览器中event.target与IE旧版中event.srcElement的差异，展示了如何编写跨浏览器兼容的事件处理函数，并演示了点击内部元素时事件向父级传递的过程。

文章目录

HTML结构代码如下：

 
HTML嵌套结构与事件绑定<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>

对应的JavaScript实现代码如下：

跨浏览器事件处理函数实现

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);
}
} 
}