JavaScript DOM 中事件目标的父链中事件监听器的顺序是如何确定的？

Question

假设有一个 div 包含一个链接（a href），并且有三个事件监听器 - on-click - 1）整个页面，2）div 3）标签。如果用户点击a标签，监听器是如何触发的？注册的顺序是什么？

Answer 1

本质上，这取决于。事件有 2 个阶段，捕获（首先发生），文档向下，冒泡，元素向上。

JS 可以做到这两点，这就是为什么在创建一个自定义事件监听时你有第三个布尔变量，例如

parent.addEventListener('click',doSomething2,true)
child.addEventListener('click',doSomething,false)

如果其最后一个参数为 true，则为捕获阶段设置事件处理程序，如果为 false，则为冒泡阶段设置事件处理程序。

参考示例代码并引用此页面：

如果用户单击子元素，则会发生以下情况：

1. 点击事件在捕获阶段开始。该事件会查找 child 的任何祖先元素是否具有用于捕获阶段的 onclick 事件处理程序。

2. 该事件在家长身上找到了一个。 doSomething2() 被执行。

3. 事件向下传播到目标本身，没有找到更多用于捕获阶段的事件处理程序。事件进入冒泡阶段并执行 doSomething()，该事件在冒泡阶段注册到子级。

4. 事件再次向上传播并检查目标的任何祖先元素是否具有冒泡阶段的事件处理程序。事实并非如此，所以什么也没有发生。

我上面链接的页面有更多信息，但希望这能回答基本问题。