How to Add Event Listeners in React

1. Add Event Listeners to Elements in React
2. Add Custom Event Listeners in React

Single Page Applications are widespread today because of their speed and reliability, and React is the primary library for building them. Event listeners and event handler functions provide essential functionality to SPAs.

React supports handling of the same events as in the DOM. There are a few key differences, such as naming conventions for the attribute names of the handling functions.

In React, event handler names are named using the camelCase convention. Also, thanks to curly braces in JSX, we can pass a JavaScript function directly instead of passing a string representing a function, as we do in HTML.

Add Event Listeners to Elements in React

An EventTarget interface in the regular DOM includes the addEventListener() method, typically used to set up an event listener for a specific HTML element.

React developers don’t have to use this method and can add event listeners when they declaratively define the elements in JSX.

Let’s take a look at an example.

export default function App() {
  return <button onClick={() => alert("hey")}>A sample button</button>;
}

This is the most basic example of an event listener in React. The onClick is not the only possible event listener, and there are more events you can listen for.

The value of the event listener attribute can be an inline function, like in the example above. However, directly passing a function as an event handler is only possible if it’s a one-line expression.

Most of the time, the value of the onClick event listener will reference a multi-line function that needs to be executed every time the button is clicked.

For functional components, event handlers are usually stored in a variable. For class components, it can be both, but it’s usually a property on the instance.

You should know what the this keyword refers to when used in the function in class components. It may be necessary to use the bind() function.

Use arrow functions for more predictable behavior.

One more difference between React and the regular DOM event handlers is that they need to explicitly call the e.preventDefault() method to stop the element’s default behavior.

Add Custom Event Listeners in React

React natively supports many different events. It’s unlikely that you’ll need to add any custom event listeners in React.

You can get a full list of supported event listeners on this page. However, if you need an event listener that is not supported, you can still add a custom event listener using the addEventListener() and removeEventListener() methods.

However, it needs to be done in the lifecycle methods to control that event handler is added when the element is mounted and removed when it is unmounted.

componentDidMount() {
    this.el.addEventListener("el-hover", this.handleNvEnter);
  }

componentWillUnmount() {
    this.el.removeEventListener("el-hover", this.handleNvEnter);
  }

In this example, el is a stand-in for any specific element in a React application.

We use the addEventListener() and removeEventListener() methods from the window interface to add a custom event listener when the React application is first mounted and removed at the last stage of the component lifecycle.