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 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

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.

Example of Event Capturing

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.

Stopping Event Propagation

Sometimes, you may want to stop the event from propagating further. You can achieve this using the stopPropagation method.

Example of Stopping Event Propagation

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.