WTF is `use capture` in vanilla JS event listeners?
A few weeks ago, I shared an approach to writing event listeners known as event bubbling.
The last argument in addEventListener()
is useCapture
, and it specifies whether or not you want to “capture” the event. For most event types, this should be set to false
. But certain events, like focus
, don’t bubble.
Setting useCapture
to true
allows you to take advantage of event bubbling for events that otherwise don’t support it.
// Listen for all focus events in the document
document.addEventListener('focus', function (event) {
// Run functions whenever an element in the document comes into focus
}, true);
Update: Not sure when to actually use use capture
? Here’s how to figure it out.