JavaScript useCapture demystified

http://benhowdle.im/2013/03/03/useCapture-demystified/

by benhowdle89 • 13 years ago

17 6 13 years ago

benhowdle.im

benhowdle89• 13 years ago

So far, feedback has been:

1. maybe an initial syntax overview: target.addEventListener(type, listener[, useCapture]);

2. I think it’d be worth explaining what capture and bubble are.

I agree!

csmattryder• 13 years ago

Another helpful point would be when to use capture, and when to use bubble.

Did like this post though, I've only recently picked up JS and this confused me when I tried implementing listeners a few weeks ago for a project.

jonchang• 13 years ago

quirksmode has more historical background and actually explains what happens during capture and bubble and when you might want to use it.

http://www.quirksmode.org/js/events_order.html

kaio• 13 years ago

Makes me wonder if there are any good reasons to support both [capturing, bubbling] ways of event propagation. I think the default W3C model does a pretty good job and is more consistent with the concept of the DOM _tree_ Mixing these two modes also seems to be a good source for hours of bughunting :~

dccoolgai• 13 years ago

That was a really helpful read, thanks for sharing.

jdlshore• 13 years ago

"When an event is attached to an element, it will fire once the event has fully bubbled up to the document."

This is not quite correct. The event will fire as it bubbles upward, not after it reaches the document level.

The DOM Events Level 3 specification has a helpful diagram:

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

There's also the "browser default" behavior, which is stuff like highlighting selected text. That does happen after the event finishes bubbling. (Usually.)

Note that stopping an event from bubbling (with `event.stopPropagation()`) and stopping an event's default behavior (with `event.preventDefault()`) are two separate, unrelated actions. However, returning false from an event handler is equivalent to doing both.

JavaScript useCapture demystified

Related Stories