关于DOM2级事件的事件捕获和事件冒泡

goji 发布于2019-08-19 18:34 / 3477人阅读

摘要：事件冒泡阶段，从目标元素出发，向外层元素冒泡，最后到达顶层或，依次执行绑定再其上的事件。在中，利用第三个参数控制其是从哪个阶段开始，是从捕获阶段开始，而则是跳过捕获阶段，从冒泡阶段开始。

花一天时间研究完了DOM2级事件中addEventListener的执行机制，作为开山第一帖，和大家讲讲多个addEventListener同时添加时的执行先后规律：

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

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

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

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

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

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

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

让我们再看个例子来加深这个概念：

在这段代码里，box上的捕获事件最先执行，然后是outer上的捕获事件，然后是inner上先注册的事件，然后是inner上后注册的事件，最后是box上的冒泡事件
弹出顺序为：1→2→3.2→3.1→4

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

云服务器私有云冒泡事件事件冒泡事件冒泡机制阻止冒泡事件

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

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

原生js之DOM事件相关

摘要：而由于级标准中并没有定义事件相关的内容，所以事件级别只包括级，级和级三种。此属性返回当前事件所绑定的对象。自定义事件可以绑定到任意元素上，此处选择只是为了演示方便。前端学习的东西有很多，现代前端开发，前端工程化的东西要懂，基础的原生js也要懂，毕竟，框架都是有生命周期的，更替非常快，然而却有这么一个框架，它是最轻量的前端框架，每个浏览器都内置，它叫vanilla.js。好吧，其实va...

learning 2019-08-22 13:51 评论0 收藏0
DOM 事件深入浅出（一）

摘要：本文就将带大家深入浅出地了解事件的那些属性和方法。针对不同级别的，我们的事件处理方式也是不一样的。当然其优点是不需要操作来完成事件的绑定。文章地址事件深入浅出二。在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解...

macg0406 2019-08-20 11:31 评论0 收藏0
JavaScript-浅谈DOM事件流

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

haitiancoder 2019-08-20 10:49 评论0 收藏0
温故js系列（10）-事件event

摘要：当用户选择文本框或中的一个或多个字符触发。当文本框或内容改变且失去焦点后触发。事件对象事件对象就是对象，通过处理函数传递。比如右击文本框输入区域，会弹出系统菜单点击超链接会跳转到指定页面点击提交按钮会提交数据。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：Event JavaScript-事件even...

Freelander 2019-08-20 10:24 评论0 收藏0
DOM事件

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

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