7 ms·
JavaScript useCapture demystified
- benhowdle89 14y agoSo 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 14y agoAnother 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 14y agoquirksmode 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 http://www.quirksmode.org/js/events_order.html
- kaio 14y agoMakes 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 14y agoThat was a really helpful read, thanks for sharing.
- jdlshore 14y 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 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.