javascript - 如何理解event.eventPhase？

Question

我对 event.eventPhase 感到困惑。请参阅下面的代码。

const e1=document.getElementById("id1");
function onclicked(e)
{
  console.log(e.eventPhase);
  console.log(e);
  alert(e.target.id+' clicked');
}

e1.addEventListener('click',onclicked,false);
e1.addEventListener('click',onclicked,true);

<div id="id1">hello world</div>

当点击“hello world”时，onclicked 函数会被调用两次。但 console.log(e.eventPhase); 始终输出 2(AT_TARGET)。更奇怪的是，console.log(e); 总是显示 e.eventPhase=0(通过单击展开 Firefox devtools 控制台中显示的结构 e)。我认为 e.eventPhase 在 onclicked 的第一次调用中应该为 1(CAPTURING_PHASE)，在第二次调用中应该为 3(BUBBLING_PHASE)，根据此 document .

Answer 1

为您的 div 创建包装器 id="id1" 并在其上添加相同的事件处理程序，您将在该包装器上获得捕获和冒泡阶段

因此，当您单击添加事件处理程序的元素时，它是目标，并且始终处于目标阶段，但捕获和冒泡适用于 DOM 树中更高的元素