How to understand event.eventPhase?

Question

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);

hello world

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 document.

user_7981445 · Answer

create wrapper for your div id="id1" and add the same event handler on it and you will get capturing and bubbling phases on that wrapper

so when you click on the element on which you added event handler it is TARGET and it is always at target phase but capturing and bubbling goes for elements higher in the DOM tree

user_4829725 · Answer

You are getting Event Phase 2 when you use event.eventPhase and after expanding event it's 0, because the event is already dissolved, and eventPhase is none i.e. 0. And with live console, you get 0 and not 1 or 2 or 3.

In a bubbling event propagation starts from the target element and passed to the parent element till the top most parent. And dissolved after that.

const phases = ['NONE', 'CAPTURING_PHASE', 'AT_TARGET', 'BUBBLING_PHASE']
const targetElement=document.getElementById("target-element");

function clickListener_1(e){
  console.log(e.currentTarget.constructor.name, phases[e.eventPhase]);
}

window.addEventListener('click', clickListener_1, false)
document.addEventListener('click', clickListener_1, false)
document.body.addEventListener('click', clickListener_1, false)
targetElement.addEventListener('click',clickListener_1, false);

Click Here

whereas capture propagation starts from the top element and is passed down to the child element till the target element.

const phases = ['NONE', 'CAPTURING_PHASE', 'AT_TARGET', 'BUBBLING_PHASE']
const targetElement=document.getElementById("target-element");

function clickListener_1(e){
  console.log(e.currentTarget.constructor.name, phases[e.eventPhase]);
}

window.addEventListener('click', clickListener_1, true)
document.addEventListener('click', clickListener_1, true)
document.body.addEventListener('click', clickListener_1, true)
targetElement.addEventListener('click',clickListener_1, true);

Click Here

Target Element will always be at Event.AT_TARGET phase not Event.CAPTURING_PHASE or Event.BUBBLING_PHASE. Other elements in the propagation chain can be at Event.CAPTURING_PHASE or Event.BUBBLING_PHASE depending on propagation.

useCapture passed to access propagation, Default is false which will be used for event bubbling propagation. With true capture propagation can be accessed.

The below example may help you to understand how an event goes through different phases after the trigger. The same listener is added at both propagations, capturing, and bubbling.

const phases = ['NONE', 'CAPTURING_PHASE', 'AT_TARGET', 'BUBBLING_PHASE']
const targetElement=document.getElementById("target-element");

function clickListener_1(e){
  console.log(e.currentTarget.constructor.name, phases[e.eventPhase]);
}
window.addEventListener('click', clickListener_1, true)
window.addEventListener('click', clickListener_1, false)
document.addEventListener('click', clickListener_1, true)
document.addEventListener('click', clickListener_1, false)
document.body.addEventListener('click', clickListener_1, true)
document.body.addEventListener('click', clickListener_1, false)
targetElement.addEventListener('click',clickListener_1, true);
targetElement.addEventListener('click',clickListener_1, false);

Click Here

How to understand event.eventPhase?

2 Answers