ReactJS Events

Events :-  Something could be triggered by a mouse click, a key press, window resize and other interactions that is called events. ReactJS events are named using camelCase, rather than lowercase.

React has its own event handling system which is called Synthetic Events. Synthetic Events is a cross-browser wrapper of the browser’s native event.

reactjs events

  • Click Events sample below.

  • Change events sample below

Receiving events: React web application

In React web application, the process is fairly easy and uses top-level delegation. It means that React listens to every event at the document level, which has an interesting implication: by the time any React related code is executed, events have already gone through a first capture/bubbling cycle across the DOM tree.

After receiving that event from the browser, React performs an additional cross-browser harmonization step. Browsers have different names for what is effectively the same event, React defines topLevelTypes that are wrappers around browser-specific events. For instance, transitionEnd , webkitTransitionEnd , MozTransitionEnd and oTransitionEnd all become topAnimationEnd — effectively alleviating part of the pain of designing cross-browser applications via consolidation.

Conclusion :-In this tutorial you have learned about events in React. With this knowledge, you will be able to create React application that makes full use of events.

Leave a Reply

Be the First to Comment!

Notify of
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.