Objector

moon indicating dark mode
sun indicating light mode

My Dealings with Event Handlers

August 30, 2019

As you may or may not know, I am currently on my journey to becoming better at JavaScript and React.

This has been easy at times but harder as the topics get more complicated and I continue to grow as a developer. One of the topics that have been difficult but interesting is how Event Handlers are dealt with in React.

To give a little bit of background info on this particular topic:

Event handlers help keep track of every action performed by the user. This can be anything from resizing a window, clicking on links, a page scrolling, all of which are processed by event handlers.

Things to keep in mind:

  1. The naming of events in React are of great importance, and adding events is similiar to how they are added to DOM elements.

  2. Synthetic events play a role, as they are needed to provide event details and can be passed into event handlers as well as callback functions.

  3. Defining events using JSX: use the camelCase event with the handler or callback function as the property of the JSX that is a placeholder for the element in React.

My first exposure to event handlers came in the form of tutorials in the Learn ReactJS course on Codecademy. While it was only a small preview, that part of the lesson gave me insight into updating parent and child components in React through the use of event handlers. Continuing onward, I want to make sure that the concepts that I am being exposed to will help me in the implementation aspect when building new projects. I have a long way to go with becoming stronger in React, and while this topic was a challenge, determining the logic behind it helped to broaden my understanding and increase my knowledge base.