摘要：也就是说如果我们直接单击目标，那么当事件被触发时，正处于第二阶段，这时所有的事件按照注册先后顺序触发，与是否设置第三个参数无关。
我的原文链接：再探事件的三个阶段
偶然间看到一篇经典博客，文中有一个例子挺有意思，大概是：
parent
问点击div时，事件触发的顺序是什么？
根据事件的三个阶段，我最初推测应该是先触发捕获事件再触发冒泡事件，但实际结果却是先弹出冒泡再弹出捕获。这是为什么呢？
事情先要从 addEventListener() 方法说起，MDN文档中关于此方法有明确描述：
如果事件监听器恰好注册到了事件目标上，那么这个事件会处于“目标阶段”，而不是冒泡阶段或者捕获阶段。在目标阶段的事件会触发所有的监听器，而不在乎这个监听器到底在注册时 useCapture 参数值是什么。
也就是说如果我们直接单击目标，那么当事件被触发时，event target正处于第二阶段，这时所有的事件按照注册先后顺序触发，与是否设置第三个参数无关。
event 对象中有一个字段专门用于描述事件当前是处于哪个阶段：eventPhase：
0：当前没有事件需要处理；
1：捕获阶段，事件从window传递到目标；
2：命中阶段，事件已经到达目标；
3：冒泡阶段，事件从目标传达到最顶层的window的过程；
W3C标准中有一张图描述了这个过程：
其中提到的三个阶段是 capture phase，target phase，bubble phase，事件对象的传播是根据 propagation path 进行的。完整的例子如下：
codepen
我对事件的整个生命周期的各个阶段的了解其实是非常有限的，个人推测如下：
操作系统捕获事件（点击、触摸等）；
浏览器从操作系统那里获得事件的相关信息并生成事件对象；
浏览器计算事件传播的路径；
按照路径传播并触发相应节点上的事件；
最后由浏览器销毁事件对象；
基于以上猜测，有几点不是很明白：
为什么要设计成三个阶段？
有些地方是讲的：因为历史原因——N公司提倡捕获，M公司提倡冒泡，两个公司互不妥协，于是标准组织干脆兼容两者，让事件跑一个来回，倘若不支持某个过程则静默出进入相关阶段就好。久而久之，大家都认了这个规则，但是实际上来说让事件跑一个来回效率上肯定是不高的，而且从我的理解来看只进行捕获或者冒泡也是合乎逻辑的。所以为什么现代浏览器（比如chrome）要同时支持两种传播方式呢？
传播路径如何确定？
上文中说到事件在传播前，浏览器会先为其计算出传播路径，然而DOM树表面上看并不是一棵查找二叉树，只是一种描述层级关系的树状数据结构。那么假设浏览器从操作系统拿到了事件的基本信息（点击位置，哪个键位，发生时间等），浏览器怎么在这样的树状结构中查找出一条确定的路径呢？遍历当然是可以的，但是这样效率是否太低？如果每个元素都有一个独一无二的ID，对这个路径查找问题有帮助吗？
事件与其它过程如何交互？
问题可能说的有点抽象，假设我们在div元素上绑定了一个hover动画，那么当鼠标划过时需要发生两件事情：展示动画和触发mouseover事件。我觉得合理的设计应该是先触发动画再触发事件，有两种可能性：
浏览器在事件传播前触发动画，无论是捕获还是冒泡，对动画触发先后没有影响；
浏览器在在事件传播过程中触发动画，那么动画触发顺序可能和采用捕获还是冒泡有关系；
请不吝赐教。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80423.html
摘要：二基本服务简单使用语音文本转换假定已经完成关于的注册和服务的创建。但是协议是一种非持久的单向的网络协议。而弥补了这一缺点，它是一种全双工通信协议，在通过建立握手后，单独建立一条通道用以服务器和浏览器之间的信息传送。 这是这个系列的第二篇文章，主要基于上一篇文章中提到服务进行一些基础的功能实现。 二. 基本服务简单使用 2.1 speech to text(语音文本转换) 假定已经完成关...
摘要：遗憾的是，在中注解的处理是一个相当复杂的事情。然而不幸的是，注解实例是通过代理实现的，主要也是基于自身。通过它，人们可以进行有针对性的讨论，今年晚些时候，我们也会对其进行专门的讨论。它们其实已经在中出现了不少，在中尤甚。目前而言，任重道远。 特别说明 这是一个由simviso团队进行的关于Spring Framework 5.2版本内容分享的翻译文档，分享者是Spring Framew...
摘要：今天接着介绍看过上篇的同学，应该都会用的高级爬虫功能了，附上姐妹篇链接除了爬虫之外，也可以帮你完成一些页面上的重复操作，也可以当作自动化测试开门见山，今天的目标是，爬取头条前端的文章，自动推荐到掘金废话不多说，直接上动图看效果图很大，请稍等 今天接着介绍Puppeteer 看过上篇的同学，应该都会用Puppeteer的高级爬虫功能了，附上姐妹篇链接：https://segmentfa...
摘要：本文主要解决两个问题什么是事件流事件流的三个阶段起因在学习前端的大半年来，对事件了解甚少。事件流所描述的就是从页面中接受事件的顺序。事件流事件流包括三个阶段。防止事件冒泡而带来不必要的错误和困扰。分有事件冒泡与事件捕获两种。 本文主要解决两个问题： 什么是事件流 DOM事件流的三个阶段 起因 在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。...
摘要：本文主要解决两个问题什么是事件流事件流的三个阶段起因在学习前端的大半年来，对事件了解甚少。事件流所描述的就是从页面中接受事件的顺序。事件流事件流包括三个阶段。防止事件冒泡而带来不必要的错误和困扰。分有事件冒泡与事件捕获两种。 本文主要解决两个问题： 什么是事件流 DOM事件流的三个阶段 起因 在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。...
阅读 1091·2021-11-19 09:40
阅读 4906·2021-09-22 15:59
阅读 1633·2021-08-23 09:42
阅读 2404·2019-08-29 18:42
阅读 3302·2019-08-29 10:55
阅读 1326·2019-08-27 14:19
阅读 1922·2019-08-27 10:57
阅读 1644·2019-08-26 18:27
