Notes on engineering and life.

useCapture demystified

03 Mar 2013

Ben Howdle

Ben Howdle

Product engineer helping early-stage teams move intentionally but quickly.

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 war stories, hard lessons, and practical advice 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.