js-事件捕获与事件冒泡原理 IE和DOM之间存在哪些主要差别_Vincent前端路漫漫的博客-程序员宅基地

技术标签： js  javascript  

转自博客园《JavaScript事件捕获与事件冒泡原理 IE和DOM之间存在哪些主要差别》 作者:LM


事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

  IE 5.5: div -> body -> document

  IE 6.0: div -> body -> html -> document

  Mozilla 1.0: div -> body -> html -> document -> window

（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

  DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

 

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

 

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
 
 
假设一个元素div，它有一个下级元素p。
<div>
　　<p>元素</p>
</div>
这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？
 

两种模型

以前，Netscape和Microsoft是不同的实现方式。

Netscape中，div先触发，这就叫做事件捕获。

Microsoft中，p先触发，这就叫做事件冒泡。

两种事件处理顺序刚好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera’s 和 iCab两种都不支持 。

 

事件捕获

当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

 

事件冒泡

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

W3C模型

W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

 

传统绑定事件方式

在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。

ele.onclick = doSomething2

 

IE浏览器

如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。

ele.attachEvent("onclick", doSomething2);


------------------------------------------------------------------------------------------------------------------------------------

冒泡事件：

作用：

1.多个操作被集中处理，例如父元素下有多个子元素，不需为每个子元素绑定click事件，只需绑定父元素即可，而且执行效率高。

2.可以让父元素和子元素都捕获同一事件

注意：

1.以下事件不冒泡：blur、focus、load、unload。

2.阻止冒泡并不能阻止对象默认行为。

阻止事件冒泡：

if (e && e.stopPropagation)
    e.stopPropagation()
else
    window.event.cancelBubble=true
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010245110/article/details/47947115

智能推荐

有哪些道理是我当了程序员后才知道的？_程序员终于明白的道理_why技术的博客-程序员宅基地

前几天在知乎给我推送了一个话题：有哪些道理是你当了程序员后才知道的？然后当时我就花了几分钟的时间去回答了一下。嘿，你猜怎么着？我发现我一个知乎小透明，给这个回答点赞的人还挺多：我也在公众号里面给大家分享一下吧，但是下面的这些观点，都是我的一家之言，理性讨论，不要开杠。以下是原回答。1 1.当你明白了技术永远是为了业务服务的时候，不再技术至上的时候，你就成长到程序员的下一个阶段了。2.业务第一，产品第二，技术第三。3.盈利了，是业务部门把钱搞来的，技术部门是支出部门。4.年轻的时候什么都_程序员终于明白的道理

QEMU1.3.0的源码分析三：user model之linux-程序员宅基地

为什么80%的码农都做不了架构师？>>> ..._qemu int main(int argc, char **argv, char **envp)

暗时间-程序员宅基地

第一篇 暗时间人生的长短在于思维时间生活中有很多暗时间比如走路或者吃饭等，很多人都忽略了这部分时间，这部分时间虽然零碎但是积少成多在以后便能发挥巨大的作用。 比如程序进程的切换等，这种工作状态的切换也属于暗时间，所以专注的总能更加充分的去利用时间。 互联网时代，数据如此多，我们更多的要学会从别人那里吸取经验教训，学会利用工具更快更高效的工作。 互联网技术更替，我们更多的要去学习一些

node.js之基础加密算法模块crypto_js加密模块-程序员宅基地

加密算法crypto 我很难想象在php里面md5加密只是三个字符的一个方法而已，在node.js中没封装前竟然那么长！！无法反编译的加密方式话不多说直接上代码品鉴吧onst crypto = require('crypto');function l(param) { console.log(param);}const md5 = crypto.createHash('md5')_js加密模块

CSS | 组件之loading动画适配屏幕尺寸_b端loading动效尺寸_闫小样的博客-程序员宅基地

loading组件我们在做项目的过程中尤其是跳转页面和请求接口的时，经常需要对页面的跳转进行优化，让跳转页面和接口请求数据显得更加平滑，体验效果更好。所以loading组件就产生了。此代码适配于屏幕尺寸大小，所以可以直接使用。总结代码如下：CSS#mark-bg { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 1000;}#mark-bg .container {_b端loading动效尺寸

java中的toString()_java中tostring()-程序员宅基地

**Java中的toString()方法*每一个非基本类型的对象都有一个toString()方法，因为它是Object里面已经有了的方法，而所有类都是继承Object，所以“所有对象都有这个方法”。它通常只是为了方便输出，比如System.out.println(xx)，括号里面的“xx”如果不是String类型的话，就自动调用xx的toString()方法。如果在类中没有去重写或者定义toString方法，当调用toString()方法则返回该对象的字符串表示，Object 类的 toStri_java中tostring()

随便推点

POJ 1061 青蛙约会（扩展欧几里德）-程序员宅基地

#include #include //VJ上用printf scanf要加上这个库using namespace std;long long gcd(long long a,long long b){ //欧几里德算法 return b==0?a:gcd(b,a%b);}void exgcd(long long a,long long b,long long &d,long l

python中set option_Python LDAP ValueError：使用set_option（LDAP）时出现选项错误。选项（可选）...-程序员宅基地

好的，我有一些关于LDAP的工作。如果我的代码对你有帮助的话，我会给你的。首先，我将cert放入django project。在BASE_DIR = Djando base dirdef returnPaths():return {'dn_full_path': 'CN=Person,CN=Schema,CN=your_con,DC=your_dc,DC=your_dc','cert': ..._ldap.opt_x_tls_require_cert: ldap.opt_x_tls_never

Kettle增量更新设计技巧-程序员宅基地

摘要：本文主要讨论一些在ETL中设计增量更新的方法和技巧。ETL中增量更新是一个比较依赖与工具和设计方法的过程，Kettle中主要提供Insert / Update 步骤，Delete 步骤和Database Lookup步骤来支持增量更新，增量更新的设计方法也是根据应用场景来选取的，虽然本文讨论的是Kettle的实现方式，但也许对其他工具也有一些帮助。本文不可能涵盖所有的情况，欢迎大家讨论。应用...

JavaScript基础(4) -- 常用的数字函数-程序员宅基地

·数字型(Number)1.声明vari=1;vari=newNumber(1);2.字符串与数字间的转换vari=1;varstr=i.toString();//结果:"1"..._js中数字的函数

python常用机器学习及深度学习库大合集！_python 机器学习类库-程序员宅基地

众所周知，Python在诸多领域都有非常优异的表现，比如：人工智能、机器学习、深度学习、网络爬虫、游戏开发、数据分析等，而在不同的领域中Python还内置了很多第三方库，拿来即用，十分方便，也正因如此Python在机器学习和深度学习领域得到了很好的应用。Matplotlib是Python的绘图库，它提供了一整套和matlab相似的命令API，可以生成出版质量级别的精美图形，Matplotlib使绘图变得简单，在易用性和性能间取得了优异的平衡。spaCy是一个免费的开源库，用于Python中的高级NLP。_python 机器学习类库

优酷、腾讯视频播放器插件-程序员宅基地

优酷、腾讯视频播放器插件js文件/** * playVideo 1.0.4 * https://github.com/zhouxitian/playVideo * author:[email protected] */eval(function(p,a,c,k,e,d){e=function(c){return(c35?String.fromCharCode(c+29):c.t

推荐文章

热门文章

相关标签