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

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

<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>";

}

1	`</script>`

在firefox以及IE 8下打开页面，在标签testDiv（灰色方块）上单击，结果分别如下截图：

　　　　　　firefox下结果　　　　　　　　　　　　　　　　IE 8下结果

可以看到，两者结果并不相同？究竟为什么会这样呢？

原来是由于IE浏览器以及Firefox对于冒泡型事件的支持层次不同造成的。（如对冒泡事件不是很了解可先查询相关资料）

（1）在IE 6以及后续版本，冒泡事件支持的层级达到document对象。

（2）在firefox（准确的说应该是Mozilla1.0以及更高版本），对冒泡事件的支持一直上升到window窗口对象。

于是就造成了上面事件响应结果的不同。

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

1	`document.body.onclick=func;`

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

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

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

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

Firefox下代码触发a标签的click事件无效
通过一次导出功能是让自己如何一步一步掉坑最后又是怎么爬起来的在页面中通过document.createElement('a');创建一个a标签,然后给a标签的href属性赋url,通过代码触发a标签 ...
火狐浏览器设置cookie失败_IE、谷歌Cookie记录失败，火狐成功(IE和Firefox下的Cookie兼容问题)...
昨天项目迁移了测试服务器,之后奇怪的问题出现了. IE.谷歌无法登陆,火狐可以登陆. 这个项目先后部署过两个测试服务器.一台正式服务器,登陆都是正常的,这次却突然出现这种奇怪的问题,很是纠结. 通过查 ...
Node.js event loop 和 JS 浏览器环境下的事件循环的区别
Node.js event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...
esc键退出全屏 vue_解决了VUE在浏览器全屏下监听不到Esc键盘事件
说明: 实测可以在谷歌.火狐.360 浏览器使用解决了在浏览器全屏下监听不到键盘Esc事件解决了取消全屏和全屏的同步问题,ESC按键下可以同步以下是完整的代码, // data() { retu ...
解决VUE在浏览器全屏下监听不到Esc键盘事件
实测可以在谷歌.火狐.360 浏览器使用解决了在浏览器全屏下监听不到键盘Esc事件解决了取消全屏和全屏的同步问题,ESC按键下可以同步以下是完整的代码, // data() {return {i ...
事件捕获（capture）和冒泡事件(Bubble)
PS:这里是我从别人的博客中学习事件捕获和冒泡是的总结,如果你也感兴趣的话,建议你点击链接查看原博客的内容,他们写的都是很经典! 对"捕获"和"冒泡"这两个概念 ...
html 冒泡事件拦截,JavaScript阻止事件冒泡与事件捕获
1.事件冒泡在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件. 事件冒泡依次输出:a.div.body 注意:不是所有的事件都能冒泡.blur.focus.loa ...
js IE和Firefox下event处理
如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,因为javascript的事件模型有三种,它们分别是NN4.IE4+和W3C/Safari;这也造 ...
php事件检测,细说浏览器特性检测(2)-通用事件检测_jquery
在上一篇中介绍了jQuery1.4版本新增的几个浏览器特性检测方案和具体的目的,本文将以事件为中心,介绍一个较为完整.通用的事件检测方案. 事件检测,即检测某一事件在不同的浏览器中是否存在(可用),这 ...

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

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

最新文章

热门文章