Event Bubbling
Event bubbling is the DOM phase during which an event, after firing on its target element, propagates upward through each ancestor element to the document root, giving every parent a chance to respond to the event.
Event bubbling is the DOM phase during which an event, after firing on its target element, propagates upward through each ancestor element to the document root, giving every parent a chance to respond to the event.
When a user clicks a Event bubbling is the mechanism behind event delegation — one of the most useful performance patterns in DOM programming. Rather than attaching a listener to each of 1,000 list items, you attach a single listener to the parent Calling Bubbling works in conjunction with Event Capturing, which runs in the opposite direction (document down to target) before bubbling begins. Listeners added with nested inside a inside , the browser fires the click event first on the (the target phase), then on , then , and finally on document and window. This propagation happens automatically for most event types — mouse events, keyboard events, and form events all bubble. A small number of events do not bubble: focus, blur, load, and scroll are notable non-bubblers (though focusin and focusout are the bubbling equivalents of focus and blur).
event.target to determine which item was the origin. This reduces memory usage, avoids re-attaching listeners when items are added or removed dynamically, and is the approach React uses internally for its synthetic event system.event.stopPropagation() on an event object prevents it from continuing to bubble past the current element. This is sometimes necessary when multiple nested handlers would otherwise all fire, but should be used carefully — overly aggressive stopPropagation calls can break third-party libraries and analytics that listen at the document level. event.stopImmediatePropagation() goes further, also preventing other listeners on the *same* element from firing.addEventListener(type, handler, true) or { capture: true } participate in the capture phase instead.Frequently asked questions