Event Delegation and Event Propagation in JavaScript

Introduction

Event propagation and delegation are advanced event handling concepts that can significantly improve your application’s performance and code organization. Instead of attaching event listeners to every element, you can use event delegation to handle events on parent elements. Understanding how events propagate through the DOM is essential for writing efficient, maintainable JavaScript code.

In this article, you’ll learn how events flow through the DOM, how to use event delegation effectively, and how to control event propagation.

Understanding Event Propagation

Event propagation describes how events move through the DOM tree. When an event occurs on an element, it doesn’t just happen on that element—it propagates through the DOM in a specific way.

The Three Phases of Event Propagation

Events go through three phases:

Capturing Phase - Event travels down from root to target
Target Phase - Event reaches the target element
Bubbling Phase - Event travels up from target to root

// HTML structure
// <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 parameter: true)
outer.addEventListener('click', () => {
  console.log('Outer - Capturing');
}, true);

// Bubbling phase (third parameter: false or omitted)
middle.addEventListener('click', () => {
  console.log('Middle - Bubbling');
}, false);

inner.addEventListener('click', () => {
  console.log('Inner - Bubbling');
});

// When you click the button, output:
// Outer - Capturing
// Inner - Bubbling
// Middle - Bubbling

Event Bubbling

Event bubbling is the most common phase. When an event occurs on an element, it first runs the handlers on that element, then on its parent, then all the way up on other ancestors.

// HTML: <div class="outer">
//         <div class="middle">
//           <button class="inner">Click</button>
//         </div>
//       </div>

document.querySelector('.outer').addEventListener('click', () => {
  console.log('Outer clicked');
});

document.querySelector('.middle').addEventListener('click', () => {
  console.log('Middle clicked');
});

document.querySelector('.inner').addEventListener('click', () => {
  console.log('Inner clicked');
});

// When you click the button:
// Inner clicked
// Middle clicked
// Outer clicked

Event Capturing

Event capturing is the opposite of bubbling. The event travels down from the root to the target element. You enable capturing by passing true as the third argument to addEventListener.

// HTML: <div class="outer">
//         <div class="middle">
//           <button class="inner">Click</button>
//         </div>
//       </div>

document.querySelector('.outer').addEventListener('click', () => {
  console.log('Outer - Capturing');
}, true);

document.querySelector('.middle').addEventListener('click', () => {
  console.log('Middle - Capturing');
}, true);

document.querySelector('.inner').addEventListener('click', () => {
  console.log('Inner - Capturing');
}, true);

// When you click the button:
// Outer - Capturing
// Middle - Capturing
// Inner - Capturing

Controlling Event Propagation

stopPropagation()

The stopPropagation() method prevents the event from bubbling up to parent elements.

// HTML: <div id="outer">
//         <button id="btn">Click me</button>
//       </div>

const outer = document.getElementById('outer');
const btn = document.getElementById('btn');

outer.addEventListener('click', () => {
  console.log('Outer clicked');
});

btn.addEventListener('click', (e) => {
  console.log('Button clicked');
  e.stopPropagation(); // Prevents bubbling to outer
});

// When you click the button:
// Button clicked
// (Outer clicked is NOT printed)

stopImmediatePropagation()

The stopImmediatePropagation() method prevents other listeners on the same element from being called.

const button = document.querySelector('button');

button.addEventListener('click', (e) => {
  console.log('First listener');
  e.stopImmediatePropagation();
});

button.addEventListener('click', () => {
  console.log('Second listener'); // This won't run
});

button.addEventListener('click', () => {
  console.log('Third listener'); // This won't run
});

// When you click the button:
// First listener

preventDefault()

The preventDefault() method prevents the default action of an event.

// Prevent form submission
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  console.log('Form submission prevented');
  // Perform custom validation or submission
});

// Prevent link navigation
const link = document.querySelector('a');
link.addEventListener('click', (e) => {
  e.preventDefault();
  console.log('Link navigation prevented');
});

// Prevent right-click context menu
document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  console.log('Context menu prevented');
});