Event Capturing and Bubbling in React

Mar 10, 2023 - 5 min read

Understanding Event Capturing and Bubbling in React

When working with React, understanding how events propagate through the DOM is crucial for building interactive and responsive user interfaces. Two key concepts in event propagation are event capturing and event bubbling. In this blog post, we'll explore these concepts and how they work in React.

Event Propagation

Event propagation refers to the way events travel through the DOM tree. There are three phases of event propagation:

Capturing Phase: The event starts from the root and travels down to the target element.
Target Phase: The event reaches the target element.
Bubbling Phase: The event bubbles up from the target element back to the root.

Event Bubbling

Event bubbling is the default behavior in most browsers. When an event occurs on an element, it first triggers the event handlers on that element, then moves up the DOM tree, triggering event handlers on its ancestors.

Example of Event Bubbling

BubblingExample.tsx

import React from "react";
const BubblingExample = () => {
  const handleParentClick = () => {
    alert("Parent clicked!");
  };
  const handleChildClick = () => {
    alert("Child clicked!");
  };
  return (
    <div
      onClick={handleParentClick}
      style={{ padding: "20px", backgroundColor: "#f0f0f0" }}
    >
      <div
        onClick={handleChildClick}
        style={{ padding: "20px", backgroundColor: "#d0d0d0" }}
      >
        Click me!
      </div>
    </div>
  );
};
export default BubblingExample;

In this example, clicking on the child div will trigger the handleChildClick event handler first, followed by the handleParentClick event handler due to event bubbling.

Event Capturing

Event capturing, also known as trickling is the opposite of event bubbling. In the capturing phase, the event starts from the root and travels down to the target element. To use event capturing in React, you can add the capture keyword to the event handler.

CapturingExample.tsx

import React from "react";
const CapturingExample = () => {
  const handleParentClickCapture = () => {
    alert("Parent capture clicked!");
  };
  const handleChildClickCapture = () => {
    alert("Child capture clicked!");
  };
  return (
    <div
      onClickCapture={handleParentClickCapture}
      style={{ padding: "20px", backgroundColor: "#f0f0f0" }}
    >
      <div
        onClickCapture={handleChildClickCapture}
        style={{ padding: "20px", backgroundColor: "#d0d0d0" }}
      >
        Click me!
      </div>
    </div>
  );
};
export default CapturingExample;

In this example, clicking on the child div will trigger the handleParentClickCapture event handler first, followed by the handleChildClickCapture event handler due to event capturing.

StopPropagationExample.tsx

import React from "react";
const StopPropagationExample = () => {
  const handleParentClick = () => {
    alert("Parent clicked!");
  };
  const handleChildClick = (e) => {
    e.stopPropagation();
    alert("Child clicked!");
  };
  return (
    <div
      onClick={handleParentClick}
      style={{ padding: "20px", backgroundColor: "#f0f0f0" }}
    >
      <div
        onClick={handleChildClick}
        style={{ padding: "20px", backgroundColor: "#d0d0d0" }}
      >
        Click me!
      </div>
    </div>
  );
};
export default StopPropagationExample;

In this example, clicking on the child div will trigger the handleChildClick event handler and stop the event from propagating to the parent div.