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:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
void persist()
DOMEventTarget target
number timeStamp
string type
 

More on synthetic events