What’s the difference between React event and DOM event?

Question

I’ve tried searching for an answer to this, but couldn’t find solution on the internet.

This looks pretty interesting question. Can anyone please explain if there is a real difference.

Answer 1

A React event is also known as a SyntheticEvent.

From React#SyntheticEvent:

a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers

SyntheticEvent contains nativeEvent, which can be used to access browser-specific events and event-handling mechanisms.

DOM event :

nothing but a nativeEvent mapped to the browser in which the app is running.

e.g.

1. onchange (React having onChange)

2. onclick (React having onClick) etc.

EDIT :

e.g. using onclick < IE9

element.attachEvent('onclick', function() { /* do stuff here*/ });

other browsers (including IE 9 and above):

element.addEventListener('click', function() { /* do stuff here*/ }, false);

As we can see, we need a script to handle cross-browser compatibility. One very popular library, jQuery, has done so many such things to overcome cross-browser compatibility issues.

If you check even the jQuery docs or JavaScript (e.g. official docs) for the compatibility of different APIs for different browsers, you will easily get what exactly is meant by events work identically across all browsers.

I have taken the above snippets from here.

Answer 2

React gives you a SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

The native event on DOM element can be accessed through nativeEvent attribute from the synthetic event.

Synthetic event contains the following attributes

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

Check the React documentation on Events

Consider the example,

DOMEvent      ReactEvent(Synthetic event)
onclick       onClick
onchange      onChange