What’s the Difference Between Synthetic React Events and JavaScript Events?

Understanding the key differences between JavaScript events

Photo by Robert Haverly on Unsplash.

What Are JavaScript Events?

JavaScript events are actions or occurrences that happen on web pages. They are an essential part of an interactive user interface. An event takes place when a user clicks a button or moves a mouse. It is also a result when a web page is loaded or unloaded, among many other circumstances.

HTML defines a set of events, and JavaScript uses event handlers to manage these events. React also implements event handlers, such as onClick, onMouseMove, onLoad, onError, etc. React’s event handlers are named with camelCase APIs, while JavaScript event handlers are named with lowercase APIs.

We are going to explain how React handles events and what React events’ capabilities and limitations are.

Event Capturing and Bubbling

There are four event phases defined in JavaScript:

Event.NONE (0): No event is being processed at this time.

Event.CAPTURING_PHASE (1): The event is being propagated through the target’s ancestor objects. This process starts with the Window, then Document, then the HTMLHtmlElement, and so on through the elements until the target's parent is reached. This process is called the capturing phase.

Event.AT_TARGET (2): The event has arrived at the event’s target. This process is called the targeting phase.

Event.BUBBLING_PHASE (3): The event is propagating back up through the target’s ancestors in reverse order, starting with the parent, and eventually reaching the containing Window. This process is called the bubbling phase.

The last three phrases constitute the event propagation.

In React, the Event variable is defined as follows: