A DOM event handler is a callback added directly to a DOM node. When the specified event occurs, the browser invokes it with a native DOM event object. section 8.2.3
Its relationship with React event handling highlights three practical differences:
- Native DOM handling adds listeners to individual nodes; React remembers JSX event handlers and checks matching targets through its own event system. section 8.2.3
- A native handler receives a DOM event object, while a React handler receives a custom React event object. section 8.2.3
- Many native listeners can consume substantial memory; React uses one document-level listener for each event type. section 8.2.3
A page with many buttons
Attaching a click listener to 1,000 buttons in plain JavaScript creates many individual listeners. React instead keeps a document-level click listener and checks whether the event target matches a requested node, reducing memory usage. 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.
Compare individual native DOM listeners with React’s document-level event handling. section 8.2.3
