在没有子节点的 html 元素上，事件捕获阶段未按预期工作

Question

让我们考虑以下html

<div id='outer'>
    Outer Tag
    <div id='inner'>Inner Tag</div>
</div>

应用事件

var outer = document.getElementById('outer'),
    inner = document.getElementById('inner');

outer.addEventListener('click',function(){
   console.log('Outer Clicked!')
}, false);

outer.addEventListener('click',function(){
   console.log('Outer Captured!')
}, true); // event capture flag set to true

inner.addEventListener('click',function(){
   console.log('Inner Clicked!')
}, false);

所以现在，我们已经应用了事件，正如预期的那样，当我们点击 inner element 时，输出应该如下所示

Outer Captured!
Inner Clicked!
Outer Clicked!

但是如果我们从上面移除 inner span html 那么捕获阶段似乎是在冒泡阶段之后触发的，如下所示

Outer Clicked!
Outer Captured!

谁能解释为什么会这样？

Answer 1

在目标元素上，冒泡和捕获之间没有区别 - 事件在 target phase 中。在其上注册的所有事件处理程序都将被触发，并且它们将按照它们安装的顺序被触发。

在没有子节点的 html 元素上，事件捕获阶段未按预期工作

Event capturing phase is not working as expected on html element which don't have children nodes

javascript

event-handling

event-bubbling

dom-events

event-capturing