Synthetic event system

As explained in React Quickly, Second Edition

A synthetic event system is an event-dispatching layer that presents normalized event objects while coordinating event handling independently of individual DOM listeners.

A synthetic event system gives React event handlers normalized event objects, so browser differences do not leak into everyday UI code. React follows the standard HTML event model while coordinating events without adding a separate listener to every individual DOM node. section 8.2.3

Synthetic events provide a familiar, shared API:

• Common properties include .type and .target. section 8.2.3
• Common methods include .preventDefault() and .stopPropagation(). section 8.2.3
• Specialized events add properties such as .pageX and .pageY. section 8.2.3
• Use .nativeEvent when application code needs information from the underlying browser event. section 8.2.3

Normalized mouse-wheel data

Browser implementations may expose horizontal wheel movement as .deltaX or .wheelDeltaX. React’s synthetic mouse-wheel event presents the value consistently as .deltaX, allowing the handler to use one property. section 8.2.3

Figure 8.4 React doesn’t add a listener on the individual node, but listens to any event on any node, unlike native DOM listeners.

Use the figure to compare React’s coordinated event handling with native listeners attached directly to individual DOM nodes. section 8.2.3

How React Quickly, Second Edition covers it

How deep it goes

Defines the shared API and native-event escape hatch, while illustrating listener coordination rather than implementation internals.

Examples

Uses mouse-wheel properties, shared event methods, coordinate properties, and the nativeEvent property.

What it assumes

Assumes familiarity with standard event properties and methods such as type, target, preventDefault(), and stopPropagation().

What you can do after

Apply it via React event handlers without branching around documented browser-property differences.

How it connects

Connects React events with browser events, DOM event listeners, native events, and the HTML event API.

liveBookmanning.com

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

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.