Event Bubbling & Capturing0%
Keyboard & Mouse Events

Event Bubbling & Capturing

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Event Bubbling & Capturing in Modern JavaScript

DOM events do not simply trigger in isolation on a single element. When an action occurs, the event travels through a structured three-phase lifecycle known as the DOM Event Flow: the Capturing Phase, the Target Phase, and the Bubbling Phase.

1. The 3 Phases of Event Propagation

Output
PHASE 1: CAPTURING (Downwards)
Window ───────────────┐
│ │
Document │
│ │
<html> │
│ │
<body> │
│ │
<div id="wrapper"> │
│ ▼
│ PHASE 2: TARGET
│ <button id="btn">Click Me</button>
│ ▲
│ │
PHASE 3: BUBBLING (Upwards)
  1. 1
    Capturing Phase (Trickling): The event starts at window and travels down through document, html, body, and parent containers until it reaches the target.
  2. 2
    Target Phase: The event reaches the originating element (event.target).
  3. 3
    Bubbling Phase: The event travels back upwards from the target through all ancestors until reaching window.
Default Behavior: By default, addEventListener() registers listeners for the Bubbling Phase unless explicitly specified otherwise.

2. Capturing in Practice

To listen during the Capturing Phase, pass { capture: true } or simply true as the third parameter:

JavaScript
const wrapper = document.querySelector('#wrapper');
const button = document.querySelector('#btn');
 
wrapper.addEventListener('click', () => {
console.log('1. Wrapper clicked (Capturing phase)');
}, { capture: true });
 
button.addEventListener('click', () => {
console.log('2. Button clicked (Target/Bubbling phase)');
});
 
wrapper.addEventListener('click', () => {
console.log('3. Wrapper clicked (Bubbling phase)');
});

When the button is clicked, output order is:

  1. 1
    1. Wrapper clicked (Capturing phase)
  2. 2
    2. Button clicked (Target/Bubbling phase)
  3. 3
    3. Wrapper clicked (Bubbling phase)

3. Stopping Propagation: stopPropagation() & stopImmediatePropagation()

event.stopPropagation()

Prevents the event from travelling any further up (in bubbling) or down (in capturing) the DOM tree:

JavaScript
const nestedModal = document.querySelector('.modal-content');
 
nestedModal.addEventListener('click', (e) => {
// Prevent click on modal content from closing the backdrop overlay
e.stopPropagation();
console.log('Clicked inside modal content');
});

event.stopImmediatePropagation()

Not only halts bubbling to parent nodes, but also prevents other listeners on the very same element from firing:

JavaScript
button.addEventListener('click', (e) => {
console.log('Primary handler');
e.stopImmediatePropagation();
});
 
button.addEventListener('click', () => {
console.log('Secondary handler'); // NEVER EXECUTED!
});

4. Event Delegation: The Power of Bubbling

Because events bubble up through parent nodes, you do not need to attach separate listeners to hundreds of child elements. Instead, attach a single listener to the parent element.

Output
Container (Single Event Listener Here)
├── [Button 1] (Click bubbles up)
├── [Button 2] (Click bubbles up)
└── [Button N] (Click bubbles up)

High-Performance Example: Dynamic List Deletion

JavaScript
const userList = document.querySelector('#user-list');
 
// Single listener handles all existing AND future delete buttons!
userList.addEventListener('click', (e) => {
const deleteBtn = e.target.closest('.btn-delete');
// If the click did not occur inside or on a delete button, ignore
if (!deleteBtn || !userList.contains(deleteBtn)) return;
 
const listItem = deleteBtn.closest('li');
const userId = listItem.dataset.userId;
 
console.log(`Deleting user: ${userId}`);
listItem.remove();
});

Benefits of Event Delegation:

  1. 1
    Low Memory Footprint: 1 listener instead of 1,000 listeners.
  2. 2
    Dynamic Elements: Automatically works for items added asynchronously later via API calls.
  3. 3
    No Memory Leaks: Removing items does not leave orphaned listeners.
Interactive Quiz

Practice Quiz

Question 1
In standard DOM event flow, in what order do the three phases execute?
Question 2
What is the main architectural benefit of Event Delegation?
Question 3
What is the effect of calling event.stopPropagation()?
Question 4
How do you configure an event listener to fire during the Capturing phase instead of the Bubbling phase?
Question 5
How does stopImmediatePropagation() differ from stopPropagation()?
Next Lesson

Keyboard & Mouse Events

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Event ListenersKeyboard & Mouse Events

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext