Event propagation
Event propagation is the process by which an event travels through a hierarchy of elements during capture, target, and bubbling phases.
React Quickly, Second Edition
Event propagation is the movement of an event through a document hierarchy from an origin toward ancestors and back through propagation phases.
- How it is used
- Uses propagation to handle descendant events at a parent and control whether an event reaches higher listeners.
- How deep it goes
- Explains capture, target, and bubble order, listener phase selection, eventPhase, and an enter/leave exception; defers the exception’s detailed flow.
- Examples
- Illustrates parent listeners with a highlighted contact form and stopped bubbling with an expandable menu.
- What you can do after
- Build it from scratch: place listeners on form ancestors and stop menu events from reaching a window listener.
Read how React Quickly, Second Edition explains event propagation →
Building User-Friendly DSLs
Event propagation is the process by which a DOM event is delivered from its originating element through surrounding elements in the DOM tree.
- How it is used
- Prevents nested editor actions from triggering parent AST-object selection handlers.
- How deep it goes
- Explains bubbling through surrounding DOM elements and applies stopPropagation(), without developing a broader event model.
- Examples
- Uses DisplayValue, AddNewButton, and editing input elements as nested click-handler examples.
- What you can do after
- Diagnose editor clicks that trigger unintended parent behavior and fix them with event.stopPropagation().
Read how Building User-Friendly DSLs explains event propagation →
Secrets of the JavaScript Ninja, Second Edition
Event propagation is the movement of an event through the DOM hierarchy from its target toward or from ancestor elements.
- How it is used
- Uses DOM event propagation to motivate handling descendant events efficiently through event delegation.
- How deep it goes
- Explains capturing, bubbling, handler context, and delegation, while noting that delegation requires an ancestor of the event targets.
- Examples
- Compares clicks on nested containers and delegates table-cell clicks to change cell backgrounds.
- What you can do after
- Apply DOM event listeners to delegate descendant clicks to an ancestor handler.
Read how Secrets of the JavaScript Ninja, Second Edition explains event propagation →
Pro ASP.NET Core 7, Tenth Edition
Event propagation is the browser mechanism by which an event is dispatched through related elements in an interface hierarchy.
- How it is used
- Controls whether a Blazor click handler on an ancestor also runs when a nested button is clicked.
- How deep it goes
- Explains propagation through ancestor elements and shows the parameter that stops it, without detailing the browser event lifecycle.
- Examples
- Uses a button inside a clickable div to show one click updating two counters.
- What you can do after
- Operate/configure it with @onclick:stopPropagation to prevent an ancestor’s click handler from running.
Read how Pro ASP.NET Core 7, Tenth Edition explains event propagation →
Related concepts
- event capturinghas part · Event capturing is the phase of DOM event propagation in which an event travels from outer ancestors toward its target.
- event bubblinghas part · Event bubbling is DOM event propagation in which an event travels from its target through successive ancestor nodes.
- bubble phasehas part · The bubble phase is the event-propagation stage in which an event travels from its target through ancestor elements.
- target phasehas part · The target phase is the stage of event propagation in which an event reaches its target.
- Document Object Modeluses · 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.
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.