React handles DOM events through camelCase JSX attributes like onClick and onChange, using a unified event delegation system and a cross-browser SyntheticEvent wrapper.

Syntax

<element onEventName={handlerFunction} />

Deep Dive Course

Rather than attaching a separate native event listener to every individual DOM node the way vanilla JavaScript typically does, React attaches a single listener at the application's root and uses event delegation, catching events as they bubble up and routing them internally to the correct component's handler based on where the event actually originated. Every handler receives a SyntheticEvent object, a cross-browser wrapper around the native event that normalizes behavior and exposes the same familiar properties and methods, like .target and .preventDefault(), consistently regardless of which underlying browser is running the code.

1Understanding Events in React

💡

Because of event delegation, you generally don't need to worry about attaching or removing individual DOM event listeners yourself in React — just declaring onClick={handler} in JSX handles all of that internally.

editor.html

function Button() {
  const handleClick = (event) => {
    console.log('Clicked element:', event.target.tagName);
  };
  return <button onClick={handleClick}>Click me</button>;
}

localhost:3000

2Practical Example

Here is a real-world application of Events in React showing how it is used in production React code.

editor.html

function Link() {
  const handleClick = (event) => {
    event.preventDefault();
    console.log('Default navigation prevented');
  };
  return <a href="https://example.com" onClick={handleClick}>Go</a>;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Events in React:

1. Attach event handlers declaratively via JSX props, like onClick={handler}, rather than manually calling addEventListener on refs, unless you specifically need to listen to an event React doesn't support directly

2. Rely on the SyntheticEvent object's normalized properties and methods, like .preventDefault(), for consistent cross-browser behavior rather than reaching for browser-specific native event quirks

3. Remember JSX event names are camelCase, like onClick and onChange, not the lowercase onclick/onchange used in plain HTML attributes

⚠️

Tip: Because of event delegation, you generally don't need to worry about attaching or removing individual DOM event listeners yourself in React — just declaring onClick={handler} in JSX handles all of that internally.

editor.html

function Button() {
  const handleClick = (event) => {
    console.log('Clicked element:', event.target.tagName);
  };
  return <button onClick={handleClick}>Click me</button>;
}

localhost:3000

Examples

Example 01Basic Usage

function Button() {
  const handleClick = (event) => {
    console.log('Clicked element:', event.target.tagName);
  };
  return <button onClick={handleClick}>Click me</button>;
}

Example 02Advanced Example

function Link() {
  const handleClick = (event) => {
    event.preventDefault();
    console.log('Default navigation prevented');
  };
  return <a href="https://example.com" onClick={handleClick}>Go</a>;
}

Best Practices

Attach event handlers declaratively via JSX props, like onClick={handler}, rather than manually calling addEventListener on refs, unless you specifically need to listen to an event React doesn't support directly
Rely on the SyntheticEvent object's normalized properties and methods, like .preventDefault(), for consistent cross-browser behavior rather than reaching for browser-specific native event quirks
Remember JSX event names are camelCase, like onClick and onChange, not the lowercase onclick/onchange used in plain HTML attributes

Interview Question

Why does React attach a single event listener near the root of the application instead of attaching a separate native listener to every individual element with an onClick handler?▼

Hint: Think about the memory and performance cost of attaching potentially thousands of individual native listeners across a large application.

Attaching a genuinely separate native event listener to every single DOM element that needs one, potentially thousands across a large, complex application, would consume meaningfully more memory and setup overhead than needed, since each individual listener registration has some cost. By instead attaching one single listener near the root and relying on event bubbling, React can catch essentially any event fired anywhere within the application at that one central point, then use its own internal knowledge of the component tree to figure out which specific component's handler should actually run based on where the event originated. This centralized approach is both more memory-efficient at scale and gives React a consistent, controlled point to normalize event behavior across browsers and manage things like event batching for state updates, rather than that logic being scattered across many independently-attached native listeners.

Exercises

MediumPractice using Events in React in a real scenario.

View Solution

function Button() {
  const handleClick = (event) => {
    console.log('Clicked element:', event.target.tagName);
  };
  return <button onClick={handleClick}>Click me</button>;
}

Frequently Asked Questions

Why does React attach a single event listener near the root of the application instead of attaching a separate native listener to every individual element with an onClick handler?▼

Related Functions

onclicksynthetic-eventscustom-events