Handling Events in React

Now that we have a better idea of scope and context, we can really dive into handling events (which often subsequently update state, so this is a 2-for-one)

There are not enough scrolling event handlers in the world of the world wide web

What is an Event?

Before talking about what an event handler is, let’s just get the concept of an event out of the way. An event is anything that happens within the browser (the DOM). These are normally things like:

  • Clicking something
  • Moving your mouse
  • Typing something on the keyboard
  • Scrolling
  • Etc…

But they can also be things behind the scenes such as:

  • When a video finishes playing
  • When a file begins to download
  • When an API is called
  • Etc…

Events are pretty straightforward and have been around in JavaScript since ye olde times. Without events, we have nothing to drive the cool interactivity JavaScript is known for.

There are two ways of handling events in JavaScript, you can (1) add an eventListener() to your you can use an event handler. We will focus on the event handler (on-event) method for now.

The on-event handlers are a group of properties offered by elements (e.g. links, buttons, images, forms, the base document, Events are the actions like being clicked, detecting pressed keys, getting focus, etc. The on-event handler is usually named according to the event it is designed to react to, such as onclick, onkeypress, onfocus, etc.

There are a lot of events in JavaScript, here’s an exhaustive list:

A Simple Use Case: A One Button Toggle

Let’s say we want to toggle a button from one state to another every time it’s clicked. To do this, we’ll need to implement a way for us to handle when the mouse is clicked. That is, we might want The Mouse Event API: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent is a good place to hunt for the proper event:

The click event is fired when a pointing device button (usually a mouse's primary button) is pressed and released on a single element. If the button is pressed on one element and released on a different one, the event is fired on the most specific ancestor element that contained both.

In JavaScript terms, we want to implement an Event Handler that will handle the OnClick() event that JavaScript’s API provides when we click on an element.

Event Handlers

An event handler is a function that is called by an via on....(e.g., onClick=). React handles events a bit differently than standard DOM JavaScript does, so if you’ve grown up doing a bit of vanilla HTML/CSS/JS web application development, then you should know that when using React you can just provide a listener when the component is initially rendered, there’s no need to us the addEventListener method, for example:

For example, to handle an OnClick event within a component (e.g., the handler function is in the Component itself)

onClick={this.whateverYouCalledYourHandlerFunction}

Think of event handlers as the actions that you would like to occur after an event has happened (e.g., some data has been downloaded, a user double-clicked on a button, they entered some text into a form, dragged a slider, etc…)

Here’s a very simple example of an event handler in React. Can you guess what the event handler is called?

If you guessed handleClick() you guessed right.

If you’re confused as to why we use this.handleClick = this.handleClick.bind(this) refer back to the lab on bind for a refresh. Many times, you will need to bind the this keyword to your function explicitly.

When the event handler is invoked, the this keyword inside the handler is set to the DOM element by default (we don’t normally want this to happen). Therefore we need to use the bind keyword to make sure this refers to the object that has the event handler, not to to the Window Object.

For a deep dive on this check out:

Back to our example, try commenting out line 8. Does it still work?

Challenge: Bind and Event Handlers
Do a bit of exploration in this challenge. Take the codepen below, and see if you can find a way to make the this.handleClick = this.handleClick.bind(this) work. E.g., make it alert the user when they click on the button.
Hint: you may need to think about passing some props...

For the solution, click here

Conclusion

In the next lab, we’re going to implement event handling + state. This is not as difficult as it sounds as long as you’re getting the basic concept of event handling, bind and context.

When you define an interactive component, it’s a good idea to make an event handler for that component. For example, the Toggle component below renders a button that lets the user toggle between “ON” and “OFF” states.

Take a look. By now, you should feel comfortable going line by line and describing what each line does. If not, post on the #help channel in Slack!

I added some CSS…finally.