JavaScript useCapture demystified

benhowdle.im

17 points·benhowdle89··6 comments

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

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 :~

That was a really helpful read, thanks for sharing.

"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.

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!

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.

Reply on news.ycombinator.com