snippetjavascriptTip

Understanding event bubbling, capturing and delegation in JavaScript

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascriptandbubblingdelegationeventunderstandingcapturing

Problem

Bubbling means that the event propagates from the target element (i.e. the button the user clicked) up through its ancestor tree, starting from the nearest one. By default, all events bubble.
To better understand event bubbling, consider the following HTML example, which we will be referring to for most of this article:
If we add an event listener to each element in the tree, as shown above, we would see a listener fired by the button first, then each one of the others firing from the nearest ancestor all the way up to Window.
Capturing is the exact opposite of bubbling, meaning that the outer event handlers are fired before the most specific handler (i.e. the one on the button). Note that all capturing event handlers are run first, then all the bubbling event handlers.
You can use event capturing by applying a third argument to EventTarget.addEventListener, setting it to true. For example:

Solution

<html>
  <body>
    <div id="btn-container">
      <button class="btn">Click me</button>
    </div>
  </body>
</html>

If we add an event listener to each element in the tree, as shown above, we would see a listener fired by the button first, then each one of the others firing from the nearest ancestor all the way up to Window.
Capturing is the exact opposite of bubbling, meaning that the outer event handlers are fired before the most specific handler (i.e. the one on the button). Note that all capturing event handlers are run first, then all the bubbling event handlers.
You can use event capturing by applying a third argument to EventTarget.addEventListener, setting it to true. For example:
Given this code, we would see a listener fired for each ancestor of the button first and then the listener of the button would fire.
Having explained event bubbling and capturing, we can now explain the three phases of event propagation:

During the capture phase, the event starts from Window and moves down to Document, the root element and through ancestors of the target element.

Code Snippets

<html>
  <body>
    <div id="btn-container">
      <button class="btn">Click me</button>
    </div>
  </body>
</html>

const ancestors = [
  window, document, document.documentElement,
  document.body, document.getElementById('btn-container')
];

// Target phase
document.querySelector('.btn').addEventListener('click', e => {
  console.log(`Hello from ${e.target}`);
});
// Bubble phase
ancestors.forEach(a => {
  a.addEventListener('click', e => {
    console.log(`Hello from ${e.currentTarget}`);
  });
});

// Capture phase
ancestors.forEach(a => {
  a.addEventListener('click', e => {
    console.log(`Hello from ${e.currentTarget}`);
  }, true);
});

Context

From 30-seconds-of-code: event-bubbling-capturing-delegation

Revisions (0)

No revisions yet.