useCapture demystified | Ben Howdle

Any guesses as to which will alert first?

window.addEventListener("click", function(){alert(1)}, false);
window.addEventListener("click", function(){alert(2)}, true);

Answer: the second one.

Explain that to me, yo!

The third, now optional, parameter in addEventListener is “useCapture”, which literally means fire the event at “capture” and not “bubble”. When an event is attached to an element, it will fire once the event has fully bubbled up to the document. However, if you set the useCapture flag to true, the event will fire on capture, and not wait for the event to fully bubble up the DOM tree.

tl;dr

“Events can be activated at two occasions: At the beginning (“capture”), and at the end (“bubble”).” from Unable to understand useCapture attribute in addEventListener

Deeper understanding

Javascript Events – Capturing And Bubbling