Introduction

In React, event handling plays a crucial role in making applications interactive. While most developers are familiar with the onClick event, fewer are aware of onClickCapture. This tutorial explains the event phases, how onClickCapture differs from onClick, and when to use it.

Event Propagation Phases in React

React’s event system follows the Event Propagation Model, which consists of three phases:

1. Capturing Phase (Trickling Down)
   • The event travels from the root down to the target element.
   • onClickCapture is triggered before the regular onClick event.
2. Target Phase
   • The event reaches the exact element that was clicked.
3. Bubbling Phase (Propagating Up)
   • The event then propagates up from the target element back to the root.
   • The standard onClick event fires during this phase.

Visualizing Event Flow

If we click a button inside a div, the event sequence is:

Capturing Phase ↓
  [Root] → [Div] → [Button]

Target Phase (Button is clicked)

Bubbling Phase ↑
  [Button] → [Div] → [Root]

Key Difference Between onClickCapture and onClick

Example: onClickCapture vs onClick

Let’s look at a simple example demonstrating both onClickCapture and onClick.

import React from "react";

const App = () => {
  const handleClickCapture = () => {
    console.log("onClickCapture - Capturing phase");
  };

  const handleClick = () => {
    console.log("onClick - Bubbling phase");
  };

  return (
    <div onClickCapture={handleClickCapture} onClick={handleClick} style={{ padding: 20, border: "2px solid black" }}>
      <button style={{ padding: 10 }}>Click Me</button>
    </div>
  );
};

export default App;

Expected Console Output When Clicking the Button:

onClickCapture - Capturing phase
onClick - Bubbling phase

• Step 1: onClickCapture fires first as the event moves down towards the button.
• Step 2: onClick fires after the event bubbles up from the button.

Stopping Event Propagation

Sometimes, you may want to prevent an event from reaching the bubbling phase. You can achieve this using event.stopPropagation() inside onClickCapture.

Example: Prevent Bubbling with stopPropagation

const handleClickCapture = (event) => {
  console.log("onClickCapture - Capturing phase");
  event.stopPropagation(); // Prevents bubbling
};

<div onClickCapture={handleClickCapture} onClick={() => console.log("onClick - Bubbling phase")}>
  <button>Click Me</button>
</div>;

Expected Console Output:

onClickCapture - Capturing phase

Since we stopped propagation, onClick is never triggered.

When to Use onClickCapture?

• Pre-processing events before bubbling begins (e.g., modifying event behavior before it reaches the target).
• Event Delegation – Handle events before children process them.
• Debugging event flows – Use it to log event phases and debug unintended bubbling.
• Preventing unintended actions – Stop further event propagation when necessary.

Conclusion

onClickCapture is a powerful tool in React event handling that allows you to control events in the capturing phase. Understanding when and how to use it helps in debugging, event delegation, and ensuring the correct order of execution in your event handlers.