Menu
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.
472
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.
The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on <select> elements.
React synthetic events are very similar to native events, however, with synthetic events, the same API interface is implemented across multiple browsers. Both synthetic events and native events can implement the preventDefault and stopPropagation methods.
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.
onchange (React having onChange)
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.
140
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
