DOM事件流中的冒泡和捕获

marser 发布于2019-08-20 16:42 / 3260人阅读

摘要：那么哪个先弹呢由于此时事件处于第二阶段，即处于目标阶段，弹出顺序取决的也不再是捕获或冒泡，而是谁在代码中先注册，因此，在这段代码中，弹出的是捕获冒泡。

这是本人的第一篇文章，欢迎大家多多批评指正！

DOM2级事件中addEventListener的执行机制，多个addEventListener同时添加时的执行先后规律：

W3C的DOM事件触发分为三个阶段：
1.事件捕获阶段：即由最顶层元素（一般是从window元素开始，有的浏览器是从document开始，至于其中的差别我稍后会更新）开始，逐次进入dom内部，最后到达目标元素，依次执行绑定在其上的事件；
2.处于目标阶段：检测机制到达目标元素，按事件注册顺序执行绑定在目标元素上的事件；
3.事件冒泡阶段：从目标元素出发，向外层元素冒泡，最后到达顶层（window或document），依次执行绑定再其上的事件。

在addEventListener中，利用第三个参数控制其是从哪个阶段开始，“true”是从捕获阶段开始，而“false”则是跳过捕获阶段，从冒泡阶段开始。

下面是一个简单的例子：



    
        
        事件流

在这个例子里，如果我们点击内层元素inner,那么处于捕获阶段的“outer捕获”最先弹出，接下来是目标元素"inner捕获"弹出，最后是处于冒泡阶段的"outer冒泡"弹出，即：“outer捕获”-->"inner捕获"-->"outer冒泡"。即使在代码里变换三个绑定事件的顺序，只要点击的是inner,这个执行顺序就不会变。

那么问题来了，如果我们点击的是外层outer的话呢？

要明白这个问题，我们必须明确一点：目标事件在哪一层，事件流就在哪一层回流，即使在outer事件下还有许多子孙节点，事件流都不会在outer之后往内流，此时，inner上的事件不会被触发，因此在这段代码中，只会弹出“outer捕获”和"outer冒泡"。

那么哪个先弹呢？由于此时事件处于第二阶段，即“处于目标阶段”，弹出顺序取决的也不再是捕获或冒泡，而是谁在代码中先注册，因此，在这段代码中，弹出的是：“outer捕获”→"outer冒泡"。

综上所述，事件在DOM中的执行顺序为：外层捕获事件→内层捕获事件→先注册的目标事件→后注册的目标事件→内层冒泡事件→外层冒泡事件

让我们加深理解，看下面这个例子：




    
        
        事件流

在这段代码里，点击inner，box上的捕获事件最先执行，然后是outer上的捕获事件，然后是inner上先注册的事件，然后是inner上后注册的事件，最后是box上的冒泡事件弹出顺序为："oBox捕获"→"outer捕获"→"inner冒泡"→"inner捕获"→"outer冒泡"→"oBox冒泡"。

补充一点，在ie8-中，由于addEventLister不起作用，我们使用attachEvent方法来绑定事件，此时在第二阶段，也就是处于目标阶段，如果目标元素上绑定了两个事件，那么其执行顺序和addEventLister相反：谁后注册谁先执行。

如果dom0级事件和dom2级事件同时存在，那执行顺序会是怎样呢？




    
    事件流

上面的例子中，我将outer的div在捕获阶段和冒泡阶段都绑定了点击事件，同时还在绑定了dom0级的点击事件处理函数，这时如果我们点击inner，我们会发现，事件的执行顺序是这样的oBox-Dom2捕获--> outer-Dom2捕获 --> inner-Dom2冒泡 --> inner-Dom2捕获 -->outer-dom0 click!-->outer-Dom2冒泡 --> oBox-Dom2冒泡。

由此我们可以得出一个结论：当绑定dom0级事件元素不是目标元素时，那么绑定dom0级事件的处理是在冒泡阶段处理并按事件注册的先后顺序执行（W3C先注册的先执行) ,如果绑定dom0级事件的元素是目标元素时，则不论是捕获阶段绑定的处理函数还是冒泡阶段绑定的处理函数以及dom0级事件处理函数，他们的执行顺序都是按照注册的顺序执行（W3C先注册的先执行) 。

云服务器 GPU云服务器 dom事件冒泡冒泡事件事件冒泡事件冒泡机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83110.html

JavaScript-浅谈DOM事件流

摘要：事件流指的是从页面接收事件的顺序。级事件规定方法的第三个参数设为，表示事件在捕获阶段触发。目前支持事件捕获流的浏览器有，，，，。事件流根据级事件规定，事件流应该包括三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。什么是事件？（敲黑板）事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。（by 《JavaScript高级程序设计》）比如鼠标点击，双击，滚动条滑动... 什么是事件...

haitiancoder 2019-08-20 10:49 评论0 收藏0
DOM事件

摘要：与之间的交互是通过事件实现的。而，则将事件一直冒泡到对象。事件处理程序的名字以开头，例如。级事件处理程序通过指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。变动事件在结构发生变化时触发，比如插入或者删除节点。 javascript与HTML之间的交互是通过事件实现的。事件就是文档或者浏览器中发生的一些特定的交互瞬间。事件流事件流描述的是页面接受事件的顺序，而I...

AlphaGooo 2019-08-02 15:55 评论0 收藏0
DOM事件

摘要：与之间的交互是通过事件实现的。而，则将事件一直冒泡到对象。事件处理程序的名字以开头，例如。级事件处理程序通过指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。变动事件在结构发生变化时触发，比如插入或者删除节点。 javascript与HTML之间的交互是通过事件实现的。事件就是文档或者浏览器中发生的一些特定的交互瞬间。事件流事件流描述的是页面接受事件的顺序，而I...

stormjun 2019-08-19 18:22 评论0 收藏0
JavaScript 事件——“事件流和事件处理程序”的注意要点

摘要：事件流级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段和事件冒泡阶段。事件处理程序的名字以开头，如等。如使用级方法指定的事件处理程序被认为是元素的方法。事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。事件冒泡即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。如： ...

Amio 2019-08-19 17:22 评论0 收藏0