关于IE浏览器以及Firefox下冒泡事件的响应层级

假设在我们页面有这么一段标签：

<body>
　　<div id="testDiv" style="width:200px;height:200px;background:#c0c0c0;"></div>
</body>

现在在页面加入这么一段脚本：

?
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
 
window.onload=function(){　　//在各个层级的元素上绑定事件
　　window.onclick=func;
　　document.onclick=func;
　　document.getElementById("timeDiv").onclick=func;
　　document.body.onclick=func;
}
function func(){　　//响应函数，输出响应的元素
　　document.getElementById("timeDiv").innerHTML+=this+"<br>";
}</script>

在firefox以及IE 8下打开页面，在标签testDiv（灰色方块）上单击，结果分别如下截图：

　　

　　　　　　firefox下结果　　　　　　　　　　　　　　　　IE 8下结果

可以看到，两者结果并不相同？究竟为什么会这样呢？

 

原来是由于IE浏览器以及Firefox对于冒泡型事件的支持层次不同造成的。（如对冒泡事件不是很了解可先查询相关资料）

（1）在IE 6以及后续版本，冒泡事件支持的层级达到document对象。

（2）在firefox（准确的说应该是Mozilla1.0以及更高版本），对冒泡事件的支持一直上升到window窗口对象。

于是就造成了上面事件响应结果的不同。

 

另外，有个有意思的地方不知道你注意到了没有？就是事件目标的响应顺序。（冒泡事件的响应顺序。。。好像有点废话）我们知道，firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件。在这里明显事件处理函数作用在了冒泡阶段。也就是说，如果我们采用传统的直接给事件处理函数属性赋值的话，比方说：

?
1
document.body.onclick=func;

事件处理函数将被添加到事件的冒泡阶段。

 

以上就是对于IE、firefox里面冒泡事件响应层级的一点介绍，同时顺带介绍了采用传统事件处理函数直接赋值的默认处理。详细的讲解可参见大牛Nicholas C. Zakas所著的《javascript高级程序设计》。

 

PS：以上内容仅仅为个人读书笔记，如有错漏，随时欢迎指正。同时希望能有更多的前端爱好者们共同分享你们的心得！

posted @   程序猿小卡  阅读(1830)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手