Differences Between the React Event Handlers and the Native Event

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 to onClick
• onmouseover is now defined by onMouseOver
• ontouchstart would be written as onTouchStart

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: