Event bubbling
Event bubbling is DOM event propagation in which an event travels from its target through successive ancestor nodes.
Web Components in Action
Event bubbling is DOM event propagation in which an event moves from its originating element upward through ancestor elements.
- How it is used
- Uses DOM propagation to connect descendant interactions with ancestor listeners in reusable Web Components.
- How deep it goes
- Explains propagation through DOM layers and demonstrates CustomEvent configuration, stopping short of broader event-dispatch internals.
- Examples
- Demonstrates click listeners, a myevent CustomEvent, detail data, target dispatch, and document-level listening.
- What you can do after
- Apply it via CustomEvent by dispatching detail data with bubbles: true and handling it from an ancestor listener.
Secrets of the JavaScript Ninja, Second Edition
The phase of event dispatch in which an event travels from its target up through the DOM hierarchy.
- How it is used
- Uses bubbling to predict which DOM click handlers run and to motivate event delegation.
- How deep it goes
- Explains both dispatch phases, registration choices, and target-versus-handler identity through nested elements; does not develop a delegation implementation.
- Examples
- Compares click handlers on nested containers and document, including capturing registration and differing this and event.target values.
- What you can do after
- Diagnose/debug with it when a click invokes ancestor handlers or a handler’s this differs from event.target.
Read how Secrets of the JavaScript Ninja, Second Edition explains event bubbling →
React Quickly, Second Edition
Event bubbling is the propagation stage in which an event travels from its originating target toward outer targets.
- How it is used
- Uses event bubbling to coordinate interactions across nested React elements and outside-click behavior.
- How deep it goes
- Explains propagation order, React’s focus and blur behavior, stopping propagation, and listener cleanup through a menu implementation.
- Examples
- Demonstrates nested focus handlers and an expandable menu that distinguishes inside clicks from outside pointer events.
- What you can do after
- Apply it via React handlers and DOM listeners to control nested interactions and prevent selected events reaching outer targets.
Read how React Quickly, Second Edition explains event bubbling →
Related concepts
- event delegationused by · Event delegation is an event-handling technique in which an ancestor handles events from descendant elements through event propagation.
- event propagationpart of · Event propagation is the process by which an event travels through a hierarchy of elements during capture, target, and bubbling phases.
- eventconfigured by · An event is an occurrence, change, or associated record or notification recognized as significant within a system or context.
- event.composedPathmeasured by · event.composedPath is a DOM event method that returns the ordered propagation path an event follows through the document and related objects.
- Document Object Modelpart of · The Document Object Model (DOM) is a standard programming interface that represents a document as a structured tree of objects and provides ways to access and modify its content and structure.
- blur eventcontrasts with · A blur event is a browser event dispatched when an element or window loses focus.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.