Notes on engineering and life.

useCapture demystified

03 Mar 2013

Ben Howdle

Ben Howdle

Two-time startup CTO. Author of The First CTO. Fractional engineering advisor.

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

New Book

The First CTO: The Job Nobody Explains

A playbook for the loneliest job in startups. 15 chapters of painful lessons, hard-won advice, and practical frameworks from 5 years as CTO at two seed-stage startups.

Learn more

Need a collaborator?

Let's build something incredible together.

← Back to all posts Writing software stories since 2012.