REACT EVENTS /// SYNTHETIC EVENT WRAPPER /// CAMELCASE SYNTAX /// PREVENT DEFAULT /// REACT EVENTS /// SYNTHETIC EVENT WRAPPER /// CAMELCASE SYNTAX /// PREVENT DEFAULT /// REACT EVENTS ///

Synthetic Events

Learn how React handles user interaction identically across all browsers using the SyntheticEvent wrapper and camelCase syntax.

App.jsx
1 / 11
12345
⚡

Tutor:Welcome to React Events. In plain HTML, event names are usually lowercase. But in React, events are named using camelCase, like onClick, onChange, or onSubmit.


Skill Matrix

UNLOCK NODES BY LEARNING EVENTS.

Concept: camelCase Syntax

React events must be written in camelCase. Instead of onclick, you use onClick.

System Check

How do you add a change event listener to an input in React?

Community Holo-Net

Event Driven Discussions

ACTIVE

Built a cool interaction? Have questions about event delegation? Join the channel!

Support Us

React Events & Delegation

Author

Pascual Vila

Frontend Instructor // Code Syllabus

Handling events in React is very similar to handling events on DOM elements, but with a few key syntactic differences and a powerful normalization layer.

Synthetic Events

When an event fires in React, your handler is passed a SyntheticEvent. This is a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

camelCase Syntax

In standard HTML, you might write onclick="handleClick()". In React, events are named using camelCase, and you pass a function reference rather than a string: onClick={handleClick}.

Event Delegation

React doesn't actually attach event handlers to the nodes themselves. Instead, React attaches one universal event listener to the root of the document. When an event fires, React maps it to the appropriate component and dispatches the SyntheticEvent. This improves performance dramatically on large lists or tables!

View Full Transcript+

This section covers the theory behind Event Delegation. By managing a single event listener at the root of the React application, memory usage is kept incredibly low. Additionally, the concept of Event Pooling (used in React 16 and older) meant the SyntheticEvent object was reused for performance, nullifying properties after the callback. Note: React 17+ dropped Event Pooling for better predictability, but retains delegation!

Events Glossary

SyntheticEvent

React's cross-browser wrapper around the browser's native event object. It ensures events behave consistently.

snippet.jsx

camelCase

The naming convention required by React for all event listeners (e.g., onClick, onMouseEnter).

snippet.jsx

preventDefault()

A method on the event object used to stop the browser's default behavior, like submitting a form.

snippet.jsx

stopPropagation()

A method to prevent an event from bubbling up the DOM tree and triggering parent event handlers.

snippet.jsx

Event Delegation

An optimization technique where React attaches one master event listener to the root DOM node.

snippet.jsx

Passing Arguments

To pass arguments to an event handler, wrap it in an inline arrow function.

snippet.jsx