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


Posted in Javascript onOctober 14, 2010

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

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

现在在页面加入这么一段脚本:
<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>"; 
}

在firefox以及IE 8下打开页面,在标签testDiv(灰色方块)上单击,结果分别如下截图:

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

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

IE 8下结果

可以看到,两者结果并不相同?究竟为什么会这样呢?
原来是由于IE浏览器以及Firefox对于冒泡型事件的支持层次不同造成的。(如对冒泡事件不是很了解可先查询相关资料)
(1)在IE 6以及后续版本,冒泡事件支持的层级达到document对象。
(2)在firefox(准确的说应该是Mozilla1.0以及更高版本),对冒泡事件的支持一直上升到window窗口对象。
于是就造成了上面事件响应结果的不同。

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

document.body.onclick=func;

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

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

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

Javascript 相关文章推荐
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
详解Vue打包优化之code spliting
Apr 09 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 #Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 #Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 #Javascript
理解Javascript_05_原型继承原理
Oct 13 #Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 #Javascript
理解Javascript_03_javascript全局观
Oct 11 #Javascript
理解Javascript_02_理解undefined和null
Oct 11 #Javascript
You might like
PHP无敌近乎加密方式!
2010/07/17 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
解决python 找不到module的问题
2020/02/12 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
期末学生评语大全
2014/04/24 职场文书
环保口号大全
2014/06/12 职场文书
节约用水的口号
2014/06/20 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
数学教师个人工作总结
2015/02/06 职场文书
毕业感言怎么写
2015/07/31 职场文书
小学入学感言
2015/08/01 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android