MDN将事件处理分为三个阶段，那么为什么目标阶段会触发两次呢?

Question

MDN doc解释了所有现代浏览器的事件处理分为三个阶段:

1.capturing phase -->(top most to target parent) 
2.target phase -->(element on where event happened)
3.the bubbling phase -->(target parent to top most element)

在所有这些文档阅读之后，我所理解的是，这三个阶段是相互独立的，但这个演示使我感到困惑。因为这里的目标事件触发两次，我不明白为什么这不是只触发一次，或者它的触发相对于捕获和冒泡阶段不是独立的。

Answer 1

代码中的每个div都附加了两个事件侦听器，一个用于冒泡，另一个用于捕获。因此，您将在目标级别获得两个结果，每个事件一个。

通常在编写代码时，您会选择为冒泡或捕获添加事件侦听器，而不是两者都添加，因此您只会在目标级别看到一个事件触发。