Differences Between the React Event Handlers and the Native Event
Learn about the changes introduced in React event handlers and how they differ from the native event API.
We'll cover the following
Defining events
React and JSX events resemble HTML attribute definitions. But there are differences. Events in React are defined with camelCase instead of lowercase, for example:
onclick
is changed toonClick
onmouseover
is now defined byonMouseOver
ontouchstart
would be written asonTouchStart
SyntheticEvent
The first parameter passed to the event handler is not an object of type Event
as could be assumed. Instead, React supplies its own wrapper for the native event object, named a SyntheticEvent
. The wrapper is part of React’s event system and works as a sort of normalizing layer to ensure cross-browser compatibility. As opposed to some other browsers, it strictly follows the event specifications of W3C.
preventDefault()
To prevent the browser’s standard behavior during an event, we cannot simply return false
from the event handler. React forces us to explicitly call preventDefault()
, which is another fundamental difference in the native Browser API usage. Let’s look at an example:
Get hands-on with 1200+ tech skills courses.