Handling Synthetic Events in React0%
Passing Arguments to Event Handlers

Handling Synthetic Events in React

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Handling Synthetic Events in React

1. What Are Synthetic Events?

In native browser JavaScript, event handling varies slightly across different browsers and operating systems (e.g., event bubbling details, property naming, mouse coordinates).

To ensure identical, consistent behavior across Chrome, Firefox, Safari, Edge, and mobile browsers, React wraps native browser events inside a cross-browser wrapper called the SyntheticEvent.

React's SyntheticEvent:

  • Provides the exact same standard interface across all browsers (conforming to the W3C event specification).
  • Standardizes properties like e.target, e.currentTarget, e.preventDefault(), and e.stopPropagation().
  • Retains access to the underlying browser native event via e.nativeEvent if low-level native properties are needed.

2. Event Handling Syntax: React vs HTML

There are three fundamental syntax differences between native HTML event listeners and React JSX event listeners:

Difference 1: CamelCase Naming

In HTML, event names are lowercase (onclick, onchange, onsubmit). In React JSX, event names must be camelCase (onClick, onChange, onSubmit, onKeyDown).

Difference 2: Function Reference vs String

In HTML, you pass a string of JavaScript code to execute. In React, you pass an actual function reference:

HTML
<!-- Native HTML -->
<button onclick="handleClick()">Submit</button>
 
<!-- React JSX -->
<button onClick={handleClick}>Submit</button>

Difference 3: Function Reference vs Function Invocation

A classic beginner pitfall is accidentally calling the function instead of passing its reference:

JSX
// ❌ WRONG: Calls handleClick immediately when the component renders!
<button onClick={handleClick()}>Click Me</button>
 
// ✅ CORRECT: Passes the function reference to be called when clicked
<button onClick={handleClick}>Click Me</button>
 
// ✅ CORRECT: Inline arrow function reference
<button onClick={() => console.log('Clicked!')}>Click Me</button>

3. The Synthetic Event Object (e)

When an event triggers, React automatically passes the SyntheticEvent object as the first argument to your handler function:

JSX
import React from 'react';
 
export default function ActionToolbar() {
const handleButtonClick = (e) => {
console.log('Event type:', e.type); // 'click'
console.log('Target element:', e.target); // <button> node
console.log('Shift key pressed?:', e.shiftKey); // true/false
};
 
const handleInputChange = (e) => {
console.log('Input value:', e.target.value); // current input text
};
 
return (
<div>
<input type="text" onChange={handleInputChange} />
<button onClick={handleButtonClick}>Execute Action</button>
</div>
);
}

4. Event Delegation in React

You might wonder: does attaching onClick to 1,000 list items create 1,000 separate event listeners in browser memory?

No! React utilizes Event Delegation. In modern React (React 17+), React attaches a single top-level event listener for each event type at the root DOM container (<div id="root">). When an event bubbles up to the root, React maps the event to the appropriate component and dispatches the SyntheticEvent. This delivers exceptional performance and minimal memory footprint.

Interactive Quiz

Practice Quiz

Question 1
What is a SyntheticEvent in React?
Question 2
How are event handler attributes formatted in React JSX?
Question 3
What is wrong with writing <button onClick={alert('Saved!')}>Save</button> in JSX?
Question 4
How does React achieve high performance when thousands of elements have event handlers attached?
Question 5
How can you access the browser's raw, underlying native event from React's SyntheticEvent?
Next Lesson

Passing Arguments to Event Handlers

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Lifting State Up Between SiblingsPassing Arguments to Event Handlers

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext