Understanding React's Event Mechanism: Delegation, Synthetic Events, and Source Code Flow

In React development, the onClick event is commonly used, but its internal handling differs from native DOM event binding.

When a native click is attached directly to a button, the listener is stored on the button’s handler; in React, however, the button’s click handler is a noop() function, and the actual callback is attached to the document.

Because clicks bubble, a React onClick triggers the document‑bound dispatchDiscreteEvent, which after event scheduling calls dispatchEvent to begin the real processing.

React achieves this through event delegation and synthetic events: events bubble to the root (document or root node), where a centralized handler dispatches them to the appropriate component instance and wraps them in a SyntheticEvent object.

The SyntheticEvent mimics the native event interface, adds _dispatchListeners and _dispatchInstances fields, and normalizes cross‑browser behavior while enabling performance optimizations and priority‑based processing.

Internally, React’s implementation (version 16.13.1) consists of three phases: event registration, event binding, and event triggering.

During registration, React injects event plugins, helper functions (getInstanceFromNode, getFiberCurrentPropsFromNode, getNodeFromInstance), and defines global variables such as eventPluginOrder, registrationNameDependencies, eventNameDispatchConfigs, plugins, and registrationNameModules.

Event binding occurs when ReactDOM.render creates a fiber tree; if props contain event handlers, React attaches a single native listener per event type to the document using a listenerMap to avoid duplicates, and assigns listeners based on event priority (discrete, user‑blocking, continuous).

When a DOM event occurs, React’s delegation routes it to the root, where the registered listener (e.g., dispatchDiscreteEvent for click) is invoked; after scheduling, dispatchEvent calls the plugin’s extractEvents function.

The plugin builds a SyntheticEvent, collects the callback queue (_dispatchListeners) and corresponding fiber nodes (_dispatchInstances) by traversing the fiber tree in capture‑target‑bubble order, then executes the callbacks in a loop, clearing the fields afterward.

Thus, a React onClick ultimately executes the user‑provided handler through this delegated, synthetic‑event, priority‑aware mechanism.