Event Bubbling

Event bubbling is when an event triggered on a child element propagates up through its ancestors. When you click a button inside a div inside the body, the click event fires on the button, then the div, then the body, all the way to the document.

How Bubbling Works

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

<script>
document.getElementById('grandparent').addEventListener('click', () => {
  console.log('Grandparent clicked');
});

document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', () => {
  console.log('Child clicked');
});
</script>

Output when clicking the button:

Child clicked
Parent clicked
Grandparent clicked

Why Bubbling Matters

Bubbling allows event delegation - handling events at a higher level. This is useful for:

• Dynamic content (elements added after page load)
• Performance (fewer event listeners)
• Memory efficiency

// Without delegation - need to add listener to each item
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', handleClick);
});

// With delegation - one listener handles all
document.querySelector('.list').addEventListener('click', (e) => {
  if (e.target.classList.contains('item')) {
    handleClick(e);
  }
});

event.stopPropagation() prevents the event from propagating further up (or down) the DOM tree.

Basic Usage

document.getElementById('parent').addEventListener('click', (e) => {
  console.log('Parent clicked');
  e.stopPropagation(); // Stops bubbling here
});

document.getElementById('grandparent').addEventListener('click', () => {
  console.log('Grandparent clicked'); // Won't fire!
});

stopPropagation vs stopImmediatePropagation

// stopPropagation - stops bubbling to parent elements
element.addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('This runs');
});

// stopImmediatePropagation - stops ALL other listeners on same element
element.addEventListener('click', (e) => {
  e.stopImmediatePropagation();
  console.log('First listener');
});

element.addEventListener('click', () => {
  console.log('Second listener'); // Won't run!
});

Practical Example

// Modal that doesn't close when clicking inside
const modal = document.getElementById('modal');
const modalContent = document.getElementById('modal-content');

// Close modal when clicking outside
modal.addEventListener('click', closeModal);

// Don't close when clicking inside content
modalContent.addEventListener('click', (e) => {
  e.stopPropagation();
});

Common Mistake

// WRONG - stops all propagation
document.addEventListener('click', (e) => {
  e.stopPropagation(); // Prevents all click handlers!
});

// CORRECT - stop only when needed
document.addEventListener('click', (e) => {
  if (e.target.closest('.modal')) {
    e.stopPropagation(); // Only stop for modal clicks
  }
});

The complete event flow has three phases:

Three Phases

1. Capturing Phase (top → target): Event travels from window down to target
2. Target Phase: Event reaches the target element
3. Bubbling Phase (target → top): Event travels from target back up to window

<div id="outer">
  <div id="inner">
    <button id="btn">Click</button>
  </div>
</div>

// Adding listeners for all three phases
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');

// Capturing phase (third argument = true)
outer.addEventListener('click', () => console.log('Outer capturing'), true);
inner.addEventListener('click', () => console.log('Inner capturing'), true);

// Bubbling phase (default, third argument = false)
outer.addEventListener('click', () => console.log('Outer bubbling'), false);
inner.addEventListener('click', () => console.log('Inner bubbling'), false);

// Target phase
btn.addEventListener('click', () => console.log('Target'));

Output when clicking button:

Outer capturing
Inner capturing
Target
Inner bubbling
Outer bubbling

Visual Diagram

         Window
           |
      [Document]
           |
       [HTML]
           |
       [Body]
           |
      [Outer]
           |
      [Inner]
           |
       [Button] ← Target
           |
       Back up (Bubbling)

Controlling Phase

// Capture phase (before target)
element.addEventListener('click', handler, true);

// Bubble phase (after target) - default
element.addEventListener('click', handler, false);
element.addEventListener('click', handler);