Home > Mobile >  How to understand event.eventPhase?
How to understand event.eventPhase?

Time:06-13

I am confused with event.eventPhase. See the code below.

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>

When clicking on "hello world", the onclicked function is called twice. But console.log(e.eventPhase); always outputs 2(AT_TARGET). More weirdly, console.log(e); always shows e.eventPhase=0(by clicking to expand the structure e shown in Firefox devtools console). I think e.eventPhase should be 1(CAPTURING_PHASE) in the first call of onclicked and 3(BUBBLING_PHASE) in the second call, according to this Event Propagation/Life cycle

  • Related