JavaScript 中 addEventListener() 方法上下文中的冒泡和捕获

Question

在

addEventListner(event,function,useCapture)

方法中，

useCapture

参数是冒泡和捕获两种类型。

我的问题是这个

useCapture

参数在js

addEventListener()

方法的上下文中的功能/操作是什么？

Answer 1

这张来自 DOM 事件规范 的图表可能有助于说明一些问题：

从中可以看出，事件分为三个阶段：capturing阶段，它起源于最顶层的视图，并向下工作到事件所针对的后代元素，然后是target只发生在目标元素上的阶段，最后是 冒泡 阶段，它返回层次结构回到根视图。

绝大多数时候，您只需要或只想使用冒泡阶段（IE 直到 IE9 才支持捕获阶段）。这是否必然是因为它更有用是一个问题；我们都已经习惯了它，它一直是持续创新的焦点（取消冒泡等），因为（再次）多年来，如果你想支持 IE，它是镇上唯一的游戏。 确实很有意义，但是捕获也是如此。

---

存在的原因主要是历史的怪癖。当然，很早就没有这方面的规范，当时占主导地位的浏览器（Netscape Navigator 和 Microsoft Internet Explorer）都弥补了它们对事件所做的事情。 Netscape 采用“从根开始，一直到最终目标”（捕获）方法，Microsoft 采用“从目标开始，一直到根”（冒泡）方法。因此，当需要对其进行标准化时，DOM 委员会决定采用……两者兼而有之。

Answer 2

addEventListener()

方法的第三个参数（useCapture）决定用什么方式 该事件在 html DOM 中传播。

这个参数有一个布尔值，false表示冒泡，true表示捕获。 它是可选参数，默认值为 false。

事件传播是一种定义事件发生时元素顺序的方式。 假设您在 div 元素中有一个 h1 元素。现在如果用户单击 h1 元素， 那么首先处理哪个元素的“点击”事件？

在冒泡中，最内部元素的事件将首先被处理，然后是外部。 即h1元素的“点击”事件将首先被处理，然后div元素的事件将被处理。

在capturing中，最外层元素的事件将首先被处理，然后是内部。 即div元素的“点击”事件将首先被处理，然后h1元素的事件将被处理。