关于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 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
vue基于better-scroll实现左右联动滑动页面
Jun 30 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
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
关于js datetime的那点事
2011/11/15 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
python中zip()方法应用实例分析
2016/04/16 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
收银出纳员岗位职责
2014/02/23 职场文书
现役军人家属慰问信
2015/03/24 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
nginx容器方式反向代理实战
2022/04/18 Servers