JavaScript DOM

Event Propagation

Master how events travel through the DOM tree in three phases

Find videos you like?

Save to resource drawer for future reference!

Event Propagation Flow

When you click an element, the event doesn't just fire on that element! It travels through the DOM in three distinct phases: Capture (down), Target (element), and Bubble (up).

1. Capture Phase

Event travels DOWN from window to target

2. Target Phase

Event reaches the target element

3. Bubble Phase

Event travels UP from target to window

Understanding Propagation

Capture Phase (Going Down)

Set capture: true to listen during capture phase

JavaScript Code

const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

// Capture phase (3rd parameter = true)
parent.addEventListener('click', function() {
  console.log('Parent - CAPTURE phase');
}, true);

child.addEventListener('click', function() {
  console.log('Child - TARGET phase');
});

Live Preview

Bubble Phase (Going Up)

Default behavior - events bubble up to parent elements

JavaScript Code

const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

// Default is bubble phase
child.addEventListener('click', function() {
  console.log('Child - TARGET phase');
});

parent.addEventListener('click', function() {
  console.log('Parent - BUBBLE phase');
});

Live Preview

Complete Propagation Flow

All three phases in action: Capture → Target → Bubble

JavaScript Code

const grandparent = document.querySelector('#gp');
const parent = document.querySelector('#p');
const child = document.querySelector('#c');

// Capture phase
grandparent.addEventListener('click', () => {
  console.log('1. Grandparent CAPTURE');
}, true);

// Target phase
child.addEventListener('click', () => {
  console.log('2. Child TARGET');
});

// Bubble phase
parent.addEventListener('click', () => {
  console.log('3. Parent BUBBLE');
});

Live Preview

event.stopPropagation()

Stop the event from propagating further

JavaScript Code

const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

child.addEventListener('click', function(e) {
  console.log('Child clicked');
  e.stopPropagation(); // Stop here!
});

parent.addEventListener('click', function() {
  console.log('Parent clicked');
  // This will NOT fire!
});

Live Preview

Event Delegation

Use bubbling to handle events efficiently

JavaScript Code

const list = document.querySelector('#list');

// One listener for all items!
list.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('Clicked:', e.target.textContent);
    e.target.style.backgroundColor = 'lightgreen';
  }
});

// Add new items dynamically - still works!

Live Preview

Propagation Quick Reference

Capture Phase

• Event travels down from window
• Use addEventListener(event, handler, true)
• Rarely used in practice
• Useful for intercepting before target

Bubble Phase

• Event travels up to window
• Default behavior (no 3rd parameter)
• Most commonly used phase
• Enables event delegation

Stopping Propagation

• e.stopPropagation() - Stop bubbling
• e.stopImmediatePropagation() - Stop all handlers
• Use sparingly - can break delegation

Event Delegation

• Add ONE listener to parent
• Check e.target to identify child
• Works for dynamic elements
• Better performance

Pro Tip

Use event delegation instead of adding listeners to many elements. It's more efficient and works with dynamically added elements!

Best Practices

Do This ✅

• Use event delegation for lists
• Rely on bubble phase (default)
• Check e.target in delegation
• Use stopPropagation() when needed
• Understand the propagation flow

Avoid This ❌

• Don not use capture phase unnecessarily
• Don not overuse stopPropagation()
• Don not add many listeners to many elements
• Don not forget event delegation exists
• Don not confuse target with currentTarget

Previous Topic

Event Object

Understanding event properties, methods, and the event object.

Next Topic

preventDefault & stopPropagation

Controlling default behaviors and event flow.

Ask a Question

Have a question about Event Propagation? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript DOM

Event Propagation

Master how events travel through the DOM tree in three phases

Find videos you like?

Save to resource drawer for future reference!

Event Propagation Flow

When you click an element, the event doesn't just fire on that element! It travels through the DOM in three distinct phases: Capture (down), Target (element), and Bubble (up).

1. Capture Phase

Event travels DOWN from window to target

2. Target Phase

Event reaches the target element

3. Bubble Phase

Event travels UP from target to window

Understanding Propagation

Capture Phase (Going Down)

Set capture: true to listen during capture phase

JavaScript Code

const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

// Capture phase (3rd parameter = true)
parent.addEventListener('click', function() {
  console.log('Parent - CAPTURE phase');
}, true);

child.addEventListener('click', function() {
  console.log('Child - TARGET phase');
});

Live Preview

Bubble Phase (Going Up)

Default behavior - events bubble up to parent elements

JavaScript Code

const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

// Default is bubble phase
child.addEventListener('click', function() {
  console.log('Child - TARGET phase');
});

parent.addEventListener('click', function() {
  console.log('Parent - BUBBLE phase');
});

Live Preview

Complete Propagation Flow

All three phases in action: Capture → Target → Bubble

JavaScript Code

const grandparent = document.querySelector('#gp');
const parent = document.querySelector('#p');
const child = document.querySelector('#c');

// Capture phase
grandparent.addEventListener('click', () => {
  console.log('1. Grandparent CAPTURE');
}, true);

// Target phase
child.addEventListener('click', () => {
  console.log('2. Child TARGET');
});

// Bubble phase
parent.addEventListener('click', () => {
  console.log('3. Parent BUBBLE');
});

Live Preview

event.stopPropagation()

Stop the event from propagating further

JavaScript Code

const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

child.addEventListener('click', function(e) {
  console.log('Child clicked');
  e.stopPropagation(); // Stop here!
});

parent.addEventListener('click', function() {
  console.log('Parent clicked');
  // This will NOT fire!
});

Live Preview

Event Delegation

Use bubbling to handle events efficiently

JavaScript Code

const list = document.querySelector('#list');

// One listener for all items!
list.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('Clicked:', e.target.textContent);
    e.target.style.backgroundColor = 'lightgreen';
  }
});

// Add new items dynamically - still works!

Live Preview

Propagation Quick Reference

Capture Phase

• Event travels down from window
• Use addEventListener(event, handler, true)
• Rarely used in practice
• Useful for intercepting before target

Bubble Phase

• Event travels up to window
• Default behavior (no 3rd parameter)
• Most commonly used phase
• Enables event delegation

Stopping Propagation

• e.stopPropagation() - Stop bubbling
• e.stopImmediatePropagation() - Stop all handlers
• Use sparingly - can break delegation

Event Delegation

• Add ONE listener to parent
• Check e.target to identify child
• Works for dynamic elements
• Better performance

Pro Tip

Use event delegation instead of adding listeners to many elements. It's more efficient and works with dynamically added elements!

Best Practices

Do This ✅

• Use event delegation for lists
• Rely on bubble phase (default)
• Check e.target in delegation
• Use stopPropagation() when needed
• Understand the propagation flow

Avoid This ❌

• Don not use capture phase unnecessarily
• Don not overuse stopPropagation()
• Don not add many listeners to many elements
• Don not forget event delegation exists
• Don not confuse target with currentTarget

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Event Object

preventDefault & stopPropagation

JavaScript Code Editor

Building Your Learning Module...

Event Propagation

Event Propagation Flow

1. Capture Phase

2. Target Phase

3. Bubble Phase

Understanding Propagation

JavaScript Code

Live Preview

JavaScript Code

Live Preview

JavaScript Code

Live Preview

JavaScript Code

Live Preview

JavaScript Code

Live Preview

Propagation Quick Reference

Capture Phase

Bubble Phase

Stopping Propagation

Event Delegation

Pro Tip

Best Practices

Do This ✅

Avoid This ❌

Event Object

preventDefault & stopPropagation

JavaScript Code Editor

Event Propagation

Event Propagation Flow

1. Capture Phase

2. Target Phase

3. Bubble Phase

Understanding Propagation

JavaScript Code

Live Preview

JavaScript Code

Live Preview

JavaScript Code

Live Preview

JavaScript Code

Live Preview

JavaScript Code

Live Preview

Propagation Quick Reference

Capture Phase

Bubble Phase

Stopping Propagation

Event Delegation

Pro Tip

Best Practices

Do This ✅

Avoid This ❌