Bubble phase

As explained in React Quickly, Second Edition

The bubble phase is the event-dispatch stage in which an event travels from its target element upward through its ancestors toward the window.

The bubble phase is the upward part of event propagation. After an event reaches its target, it dispatches to the target’s parent and continues through each ancestor until reaching window. section 8.3.1

Event dispatch proceeds through three stages:

• Capture phase moves from window down through the ancestors. section 8.3.1
• Target phase dispatches the event on the target element. section 8.3.1
• Bubble phase moves from the target’s parent upward through the ancestors. section 8.3.1

Listening during bubbling

A normal event listener handles bubbling and target phases by default: element.addEventListener("click", onClick);. Inspect event.eventPhase to distinguish bubbling, whose value is Event.BUBBLING_PHASE (3), from capture and target phases. section 8.3.1

Figure 8.7 When you click the black button, the browser will start propagating events throughout the nodes in the document starting at the window, moving down through the document tree in the capture phase until the target, and then moving back up the tree in the bubbling phase until it reaches the window.

Follow the event’s path from window to the clicked button during capture, then back upward during bubbling. section 8.3.1

How React Quickly, Second Edition covers it

How deep it goes

Defines the dispatch order and phase values, but defers detailed React-specific event handling.

Examples

Uses a clicked black button, ancestor traversal, addEventListener, and eventPhase values.

What it assumes

Assumes familiarity with browser DOM elements and JavaScript event listeners.

What you can do after

Apply it via addEventListener and identify bubbling events with eventPhase.

How it connects

Connects bubble phase with event propagation, capture phase, target phase, and addEventListener.

liveBookmanning.com

Read React Quickly, Second Edition on liveBook Get the book at manning.com

Related concepts

• event propagationpart of · Event propagation is the process by which an event travels through a hierarchy of elements during capture, target, and bubbling phases.
• event delegationused by · Event delegation is an event-handling technique in which an ancestor handles events from descendant elements through event propagation.

This explainer was generated by Manning's knowledge graph from the text of React Quickly, Second Edition. The section links point to the parts of the book it draws on.