Event Bubbling and Capturing Explained

Event Bubbling and Capturing Explained

Bubbling (Bottom-Up)

Events propagate from the target up to the document:

// clicking button logs: button, div, body, document

Default listeners run in this phase.

Capturing (Top-Down)

Events propagate from the document down to the target:

element.addEventListener("click", handler, true); // capturing phase

Useful for intercepting events before they reach the target.

Combined Example

<form id="form">
  <div id="div">
    <button id="button">Click</button>
  </div>
</form>

form.addEventListener("click", () => console.log("form capturing"), true);
form.addEventListener("click", () => console.log("form bubbling"));
div.addEventListener("click", () => console.log("div capturing"), true);
div.addEventListener("click", () => console.log("div bubbling"));
button.addEventListener("click", () => console.log("button"));

Clicking the button logs: form capturing, div capturing, button, div bubbling, form bubbling.

The Takeaway

Bubbling: bottom-up (target to document), default. Capturing: top-down (document to target), use third arg true. Order: capturing (outer to inner), target, bubbling (inner to outer).