假设在我们页面有这么一段标签： 复制代码 代码如下: 现在在页面加入这么一段脚本： 复制代码 代码如下: <br><br>window.onload=function(){ //在各个层级的元素上绑定事件 <br> window.onclick=func; <br> document.onclick=func; <br> document.getElementById("timeDiv").onclick=func; <br> document.body.onclick=func; <br>} <br>function func(){ //响应函数，输出响应的元素 <br> document.getElementById("timeDiv").innerHTML =this "<br>"; <br>} <br> </div> <br>在firefox以及IE 8下打开页面，在标签testDiv（灰色方块）上单击，结果分别如下截图： <br> <p><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101014000811260.gif" class="lazy" alt=""> <br>firefox下结果<br><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101014000811332.gif" class="lazy" alt=""></p> <p>IE 8下结果</p> <p>可以看到，两者结果并不相同？究竟为什么会这样呢？<br>原来是由于IE浏览器以及Firefox对于冒泡型事件的支持层次不同造成的。（如对冒泡事件不是很了解可先查询相关资料） <br>（1）在IE 6以及后续版本，冒泡事件支持的层级达到document对象。 <br>（2）在firefox（准确的说应该是Mozilla1.0以及更高版本），对冒泡事件的支持一直上升到window窗口对象。 <br>于是就造成了上面事件响应结果的不同。 <br><br>另外，有个有意思的地方不知道你注意到了没有？就是事件目标的响应顺序。（冒泡事件的响应顺序。。。好像有点废话）我们知道，firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件。在这里明显事件处理函数作用在了冒泡阶段。也就是说，如果我们采用传统的直接给事件处理函数属性赋值的话，比方说： <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="69591" class="copybut" id="copybut69591" onclick="doCopy('code69591')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code69591"> <br>document.body.onclick=func; <br> </div> <br>事件处理函数将被添加到事件的冒泡阶段。 <br><br>以上就是对于IE、firefox里面冒泡事件响应层级的一点介绍，同时顺带介绍了采用传统事件处理函数直接赋值的默认处理。详细的讲解可参见大牛Nicholas C. Zakas所著的《javascript高级程序设计》。 <br><br>PS：以上内容仅仅为个人读书笔记，如有错漏，随时欢迎指正。同时希望能有更多的前端爱好者们共同分享你们的心得！
