关于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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
js实现购物车功能
Jun 12 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
Vue自定义多选组件使用详解
Sep 08 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
smarty内置函数capture用法分析
2015/01/22 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jquery map方法使用示例
2014/04/23 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
python str与repr的区别
2013/03/23 Python
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python中使用序列的方法
2015/08/03 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Django  ORM 练习题及答案
2019/07/19 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
如何通过python实现全排列
2020/02/11 Python
iPython pylab模式启动方式
2020/04/24 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
2014年扶贫帮困工作总结
2014/12/09 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
2015年服务员工作总结
2015/04/08 职场文书
社区服务理念口号
2015/12/25 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python