The propagation of events in the DOM is divided into two stages: capture and bubble. The answer is: 1. Event capture is transmitted from the outer layer to the inner layer, 2. Event bubble is transmitted from the inner layer to the outer layer, 3. The complete process is the capture stage → target stage → bubble stage, 4. The process can be controlled through stopPropagation and other methods, 5. The practical application includes event delegation and click external closing functions. Understanding the two helps to write efficient and predictable event processing code.

Event bubble and event capturing are two phases of event propagation in the DOM (Document Object Model) that determine the order in which elements receive events when a user interacts with nested elements.

Let's say you have a button inside a div , and both have click event listeners. When you click the button, that click also technically happens on the div — since the button is inside it. So, which event runs first? That's where event bubblering and capturing come in.

1. Event Bubbling: From Inner to Outer

In event bubbleing , the event starts at the innermost target element (like the button) and then bubbles up through its ancestors (parent, grandparent, etc.) until it reaches the root of the document.

Example:

 <div id="outer">
  <div id="inner">
    Click me
  </div>
</div>

 document.getElementById("inner").addEventListener("click", () => {
  console.log("Inner clicked");
});

document.getElementById("outer").addEventListener("click", () => {
  console.log("Outer clicked");
});

When you click on the inner div , you'll see:

 Inner clicked
Outer clicked

This is event bubbleing — the event goes from the child to the parent.

? This is the default behavior in most cases.

2. Event Capturing: From Outer to Inner

In event capturing , the event starts from the outermost element and travels down to the target element.

To enable capturing, you pass true as the third argument in addEventListener , or explicitly set the capture option.

 document.getElementById("inner").addEventListener("click", () => {
  console.log("Inner clicked");
}, true); // 'true' means useCapture

document.getElementById("outer").addEventListener("click", () => {
  console.log("Outer clicked");
}, true);

Now, clicking the inner div will log:

 Outer clicked
Inner clicked

Because the event is captured from the top down.

? Capturing happens first , then bubble (if not stopped).

3. The Full Event Flow: Three Phases

An event actually goes through three phases :

1. Capturing Phase – event goes from window down to the parent of the target.
2. Target Phase – event reaches the target element.
3. Bubbling Phase – event bubbles up from the target to window .

Example:

 <div id="grandparent">
  <div id="parent">
    <button id="button">Click</button>
  </div>
</div>

With listeners on all three, and capturing enabled on some:

• Capturing listeners (with true ) fire during the capturing phase (top → target).
• Bubbling listeners (default) fire during the bubble phase (target → top).

4. How to Control the Flow

You can stop propagation at any point:

• event.stopPropagation() – stops the event from moving further in either phase.
• event.stopImmediatePropagation() – also prevents other listeners on the same element from running.

Example:

 button.addEventListener("click", function(e) {
  e.stopPropagation();
  console.log("Button clicked, but won't bubble");
});

Now, the parent won't receive the click event.

Practical Use Cases

• Event Delegation : Use bubble to attach a single listener on a parent to handle events for many children (eg, a list with many buttons).
• Click Outside to Close : Attach a capturing listener on the body to detect clicks outside a modal or dropdown.

   document.body.addEventListener("click", (e) => {
    if (!modal.contains(e.target)) {
      modal.close();
    }
  }, true); // Capturing ensures it runs before any inner bubble listeners

  ---

  In short:

  • Bubbling : Inner → Outer (default).
  • Capturing : Outer → Inner (use true in addEventListener ).
  • The full flow is: Capture → Target → Bubble .

  Understanding both helps you write more efficient and predictable event handling code.

  The above is the detailed content of What is event bubbling and event capturing in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!