What is an Event Handler?

Event handlers in React are functions assigned to browser events (such as "click," "change," or "submit") that perform a specific action when the event occurs. These functions are invoked whenever the corresponding event is triggered by the user.

In terms of programming in React, event handlers are defined as properties of React components and are typically passed as attributes to user interface elements, such as buttons or forms. When a user interacts with these elements, React calls the corresponding event handler function to update the component's state or execute other necessary actions.

For example, an event handler can be used to update a React component's state based on user input in a form. When the user fills out the form and clicks the "submit" button, the corresponding event handler is triggered to collect the form data and update the component's state with that information.

Event handlers are an essential part of React programming because they allow developers to create interactive and responsive user interfaces that react to user actions.

How to Use an Event Handler

Suppose you have a React component that displays a button, and when the button is clicked, an alert with a message is shown. You can create an event handler for the button's "click" event as follows:

import React from "react";

function MyComponent() {

  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click here!
    </button>
  );
}

export default MyComponent;

In this example, the handleClick function is defined to display an alert message when the button is clicked. The function is then passed as an onClick property to the button element, so it is triggered when the button is clicked.

Note that the "click" event in React is written in camelCase as onClick. Furthermore, the event is directly assigned to the button element using the onClick attribute. When the user clicks the button, React calls the handleClick function to display the alert message.

Reading Props in Event Handlers

Since event handlers are declared within a component, they have access to the component's props. Here's an example of a button that, when clicked, shows an alert with the message prop:

function AlertButton({ message, children }) {
  return (
    <button onClick={() => alert(message)}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <AlertButton message="Playing!">
        Play Movie
      </AlertButton>
      <AlertButton message="Uploading!">
        Upload Image
      </AlertButton>
    </div>
  );
}

Passing Event Handlers as Props

In React functional components, event handlers can be passed as props to other components. This is useful when a child component needs to perform a specific action in response to an event, but you want to define that action in the parent component.

To pass an event handler as a prop, define the handler function in the parent component and pass it as a prop to the child component. The child can then call the handler function when necessary, typically in response to an event like a mouse click or key press.

Passing event handlers as props allows for greater reusability of components in different contexts since the event logic resides in the parent and can be customized as needed.

For example, instead of passing a generic event handler like <Child onClick={handleClick} />, you can name the prop more descriptively, like <Child onButtonClicked={handleClick} />.

This improves code readability and clarifies the component's functionality.

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

function PlayButton({ movieName }) {
  function handlePlayClick() {
    alert(`Playing ${movieName}!`);
  }

  return (
    <Button onClick={handlePlayClick}>
      Play "{movieName}"
    </Button>
  );
}

function UploadButton() {
  return (
    <Button onClick={() => alert('Uploading!')}>
      Upload Image
    </Button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <PlayButton movieName="Kiki's Delivery Service" />
      <UploadButton />
    </div>
  );
}

Event Propagation

Event propagation, also known as bubbling and capturing, is the process by which events propagate from parent elements to child elements (or vice versa) based on the propagation mode.

In React, events naturally propagate according to the component tree's structure in the DOM. When an event is triggered on a child element, it propagates first to the parent and then to all other parent elements (if applicable).

To control event propagation, React provides methods like stopPropagation() to stop the event from propagating and preventDefault() to prevent the event's default behavior. These methods can be used inside the event handler to manage how the event is handled.

React also supports propagation modes like capturing and bubbling. You can specify the mode using the capture property. For example, onClickCapture uses the capturing mode, whereas onClick uses the bubbling mode.

Example of stopPropagation():

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
      <Button onClick={() => alert('Playing!')}>
        Play Movie
      </Button>
      <Button onClick={() => alert('Uploading!')}>
        Upload Image
      </Button>
    </div>
  );
}

Using preventDefault()

export default function Signup() {
  return (
    <form onSubmit={e => {
      e.preventDefault();
      alert('Submitting!');
    }}>
      <input />
      <button>Send</button>
    </form>
  );
}

List of Common Event Handlers in React

1. onClick: Handles mouse clicks.
2. onChange: Handles changes in form elements (e.g., <input>, <select>).
3. onSubmit: Handles form submissions.
4. onKeyDown: Handles key presses.
5. onKeyUp: Handles key releases.
6. onFocus: Handles focus on an element.
7. onBlur: Handles loss of focus on an element.
8. onLoad: Handles loading of elements like images.
9. onError: Handles errors in loading elements like images.
   

Lesser-Known Event Handlers

1. onScroll: Handles scrolling.
2. onMouseDown: Handles mouse button presses.
3. onMouseUp: Handles mouse button releases.
4. onMouseEnter: Handles mouse cursor entering an element.
5. onMouseLeave: Handles mouse cursor leaving an element.
6. onMouseMove: Handles mouse movement over an element.
7. onContextMenu: Handles right-click events.
8. onDoubleClick: Handles double-click events.
9. onDragStart: Handles drag start events.
10. onDragEnd: Handles drag end events.

Extra: onPlay and onPause Event Handlers

The onPlay and onPause event handlers are used to manage media playback (audio/video) in React.

import React, { useState } from 'react';

function MediaPlayer(props) {
  const [isPlaying, setIsPlaying] = useState(false);

  const handlePlay = () => {
    setIsPlaying(true);
  }

  const handlePause = () => {
    setIsPlaying(false);
  }

  return (
    <div>
      <h2>{props.title}</h2>
      <audio
        onPlay={handlePlay}
        onPause={handlePause}
        src={props.src}
      />
      <p>{isPlaying ? 'Playing' : 'Paused'}</p>
    </div>
  );
}

export default MediaPlayer;

In this example, handlePlay and handlePause are used as event handlers for onPlay and onPause respectively to update the component's state. When the media is played, isPlaying is set to true, and when paused, it is set to false.