关于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 相关文章推荐
取得父标签
Nov 14 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
详解Typescript里的This的使用方法
Jan 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
php计算年龄精准到年月日
2015/11/17 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python PyTorch预训练示例
2018/02/11 Python
Python subprocess模块常见用法分析
2018/06/12 Python
django最快程序开发流程详解
2019/07/19 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
创先争优承诺书范文
2014/03/31 职场文书
一年级小学生评语
2014/04/22 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
2014年客房部工作总结
2014/11/22 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
学校隐患排查制度
2015/08/05 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS