Event capturing

As explained in React Quickly, Second Edition

The capture phase is the stage in event propagation during which an event travels from an outer target toward its originating target.

Event capturing is the first stage of event propagation. An event travels from the window through each ancestor toward its originating target before the target and bubble phases run. section 8.3.1

Propagation proceeds through three stages:

• Capture phase: dispatches the event from the window through ancestors, ending at the target’s parent. section 8.3.1
• Target phase: dispatches the event on the originating element. section 8.3.1
• Bubble phase: dispatches the event back upward through the ancestors toward the window. section 8.3.1

Registering a capture listener

Use addEventListener with a third argument containing capture: true: element.addEventListener("click", onClick, { capture: true }); The event object’s eventPhase property identifies the current phase. 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.

Trace a click from the window down to the button during capture, then back upward during bubbling. section 8.3.1

How React Quickly, Second Edition covers it

How deep it goes

Defines propagation order and capture-listener registration, then defers React-specific differences to later treatment.

Examples

Uses a clicked button, ancestor traversal, addEventListener, capture: true, and eventPhase as concrete teaching artifacts.

What it assumes

Builds from HTML events, DOM nodes, targets, and ancestors before distinguishing browser propagation from React handling.

What you can do after

Apply it via JavaScript addEventListener by registering callbacks specifically for the capture phase.

How it connects

Connects event propagation with target phase, bubble phase, DOM event listeners, and React event handling.

liveBookmanning.com

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

Also explained in

• 

  liveBookmanning.com
  Secrets of the JavaScript Ninja, Second EditionThe phase of DOM event dispatch in which an event travels down the hierarchy toward its target.

Compare how 2 books explain event capturing →

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 bubblingcontrasts with · Event bubbling is DOM event propagation in which an event travels from its target through successive ancestor nodes.
• addEventListenerused by · addEventListener is a web API method that registers a callback to run when a specified event occurs on an event target.

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.