Javascript js中两个相同侦听器的捕获和气泡的执行顺序

为什么结果不是这样

test.html:50 I am capturing html
test.html:44 I am capturing body
test.html:32 I am capturing parent
test.html:35 I am parent
test.html:56 I am capturing parent
test.html:59 I am parent
test.html:47 I am body
test.html:53 I am html

请详细解释一下

各州：

注意：对于附加到事件目标的事件侦听器，事件处于目标阶段，而不是捕获和冒泡阶段。目标阶段中的事件将按照元素注册的顺序触发元素上的所有侦听器，而不考虑

useCapture

参数

这就是这里发生的事情。事件侦听器附加到事件目标（

parent

，在您的示例中），因此事件处于目标阶段，侦听器按注册顺序触发

请注意，如果单击子级，则不会发生这种情况，因为事件处于捕获或冒泡阶段。预期的结果是：

test.html:50 I am capturing html
test.html:44 I am capturing body
test.html:32 I am capturing parent
test.html:56 I am capturing parent
test.html:35 I am parent
test.html:59 I am parent
test.html:47 I am body
test.html:53 I am html

对事件流有很好的解释和图表

---

最重要的是目标阶段触发捕获和冒泡动作

第二阶段（“目标阶段”：到达要素的事件）不单独处理： 捕获和冒泡阶段的处理程序都会在该阶段触发

test.html:50 I am capturing html
test.html:44 I am capturing body
test.html:32 I am capturing parent
test.html:56 I am capturing parent
test.html:35 I am parent
test.html:59 I am parent
test.html:47 I am body
test.html:53 I am html

I am capturing html
I am capturing body
I am capturing parent
I am capturing parent
I am capturing child
I am child
I am parent
I am parent
I am body
I am html