Search⌘ K

Differences Between the React Event Handlers and the Native Event

Explore how React defines events differently with camelCase and uses SyntheticEvent to normalize native events for cross-browser compatibility. Understand the importance of calling preventDefault explicitly and how React manages event registration and cleanup automatically for safer and cleaner event handling.

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 ...