关于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 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
语义化 H1 标签
Jan 14 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
vue2路由基本用法实例分析
Mar 06 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.MVC的模板标签系统(二)
2006/09/05 PHP
php 常用类整理
2009/12/23 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
php rsa加密解密使用详解
2015/01/14 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
页面使用密码保护代码
2013/04/10 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
js实现随机抽奖
2020/03/19 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
python三元运算符实现方法
2013/12/17 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
数学系个人求职信范文
2014/01/30 职场文书
加入学生会演讲稿
2014/04/24 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
docker-compose部署Yapi的方法
2022/04/08 Servers
正则表达式基础与常用验证表达式
2022/06/16 Javascript