What are Synthetic Events even…

Say that title in a New York Accent.

Generally speaking, JavaScript events are actions that happen on web pages when certain occurrences are triggered. These are triggered usually by event handlers- when a user clicks a button, moves a mouse, creates an action on a webpage etc… It can also happen when a page is loaded.

Sets of events are defined by HTML, and JS uses event handlers (or event listeners) to manage these. React has it’s own implementation as well but written in JSX, some are known as onClick, onMouseMove, onKeyPress, onKeyUp , etc.

React makes use of basic HTML events, or the browser’s native events, by wrapping them in something called SyntheticEvents. This wrapper allows React to make sure events are handled the same way across all browsers (a.k.a. standardization) for consistency. These events also have methods like preventDefault(), stopPropagation(), etc.

Here are some attributes that synthetic events have, as taken from the React documentation:

More on synthetic events



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store