🌊 Event Bubbling, Capturing, and Delegation

What Is Event Propagation?

When you click a button nested inside several containers, the click doesn't only fire on the button. The browser sends the event on a round trip through every ancestor, giving each a chance to respond. That round trip is event propagation.

💡 The stadium wave. Picture a wave in a packed stadium. It starts at the top rows (the document), rolls down to the section where it began (the target) — that's capturing — and then rolls back up to the top — that's bubbling. Anyone in a row the wave passes can join in on the way down or the way back up.

The Three Phases

Every event moves through three phases in order: it captures down to the target, reaches the target, then bubbles back up.

Consider this markup and listeners on all three elements, in both phases:

<div id="outer">
  <div id="middle">
    <button id="inner">Click Me</button>
  </div>
</div>

const outer  = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner  = document.getElementById('inner');

// Capturing phase — third argument (or { capture: true })
outer.addEventListener('click',  () => console.log('1 capture: outer'),  true);
middle.addEventListener('click', () => console.log('2 capture: middle'), true);
inner.addEventListener('click',  () => console.log('3 capture: inner'),  true);

// Bubbling phase — the default
inner.addEventListener('click',  () => console.log('4 bubble: inner'));
middle.addEventListener('click', () => console.log('5 bubble: middle'));
outer.addEventListener('click',  () => console.log('6 bubble: outer'));

1 capture: outer
2 capture: middle
3 capture: inner
4 bubble: inner
5 bubble: middle
6 bubble: outer

Controlling Propagation

stopPropagation()

Halts the event's journey so ancestor listeners never see it:

middle.addEventListener('click', (event) => {
  event.stopPropagation();      // outer's handler will NOT run
  console.log('middle handled it');
});

preventDefault()

Cancels the browser's default action but lets the event keep travelling:

form.addEventListener('submit', (event) => {
  event.preventDefault();       // no page reload…
  // …but the submit event still bubbles to ancestor listeners
});

link.addEventListener('click', (event) => {
  event.preventDefault();   // don't navigate
  event.stopPropagation();  // don't let ancestors react
  showContent(link.getAttribute('href'));
});

overlay.addEventListener('click', (event) => {
  // Only close if the overlay itself — not its content — was clicked
  if (event.target === overlay) closeModal();
});

The Delegation Pattern

Because events bubble, you can attach one listener to a parent and use event.target to figure out which child was interacted with. This is event delegation — the reason bubbling matters so much in practice.

Before: a listener per element

// Inefficient, and blind to elements added after this runs
document.querySelectorAll('.menu-item').forEach((item) => {
  item.addEventListener('click', () => navigate(item.dataset.section));
});

After: one delegated listener

document.getElementById('menu').addEventListener('click', (event) => {
  const item = event.target.closest('.menu-item');
  if (!item) return;                 // clicked empty space? ignore
  navigate(item.dataset.section);
});

Routing multiple actions with data attributes

A scalable delegation style: put the intended action in a data-action attribute and switch on it.

<div id="toolbar">
  <button data-action="save">Save</button>
  <button data-action="delete">Delete</button>
  <button data-action="export" data-format="pdf">Export PDF</button>
</div>

document.getElementById('toolbar').addEventListener('click', (event) => {
  const btn = event.target.closest('[data-action]');
  if (!btn) return;

  switch (btn.dataset.action) {
    case 'save':   saveDocument(); break;
    case 'delete': deleteDocument(); break;
    case 'export': exportAs(btn.dataset.format); break;
  }
});

Events That Don't Bubble

Delegation relies on bubbling — but a few events don't bubble. For these, either attach listeners directly or use the bubbling alternative.

// Delegate focus handling across a whole form using focusin (it bubbles)
document.querySelector('form').addEventListener('focusin', (event) => {
  if (event.target.matches('input')) event.target.classList.add('is-focused');
});
document.querySelector('form').addEventListener('focusout', (event) => {
  if (event.target.matches('input')) event.target.classList.remove('is-focused');
});

Hands-on: Delegated To-Do List

<form id="add-form">
  <input id="new-task" placeholder="New task…" />
  <button>Add</button>
</form>
<ul id="tasks"></ul>

const form = document.getElementById('add-form');
const input = document.getElementById('new-task');
const list = document.getElementById('tasks');

// Add a task
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const text = input.value.trim();
  if (!text) return;

  const li = document.createElement('li');
  li.innerHTML =
    `<span class="label">${text}</span> ` +
    `<button class="done">Done</button> ` +
    `<button class="del">Delete</button>`;
  list.appendChild(li);
  input.value = '';
  input.focus();
});

// ONE delegated listener handles every current AND future item
list.addEventListener('click', (event) => {
  const li = event.target.closest('li');
  if (!li) return;

  if (event.target.matches('.done')) {
    li.classList.toggle('completed');
  } else if (event.target.matches('.del')) {
    li.remove();
  }
});

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — Event bubbling & delegation
• MDN — Element.closest()
• javascript.info — Event delegation
• MDN — Event.stopPropagation()

🚀 What's Next?

Forms are where events, delegation, and validation all meet. Next we focus on form events specifically — submit, input, and change — and how to validate and process a form entirely in JavaScript.