事件捕获阶段在没有子节点的 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时所预期的那样，排名应如下

外部捕获！
内部点击！
外点击！

但是，如果我们从HTML上方删除了inner span

外点击！
外部捕获！

任何人都可以解释为什么会发生这种情况吗？

Answer 1

在目标元素上，起泡和捕获之间没有区别 - 事件在目标阶段。注册其上注册的所有活动处理程序将被解雇，并将以安装的顺序发射。