JavaScript - Bubbling, Capturing, Delegation

Overview

Estimated time: 15–20 minutes

Event bubbling and capturing define how events propagate through the DOM. Delegation allows efficient event handling for dynamic content.

Learning Objectives

• Understand event propagation phases: bubbling and capturing.
• Implement event delegation for scalable event handling.

Prerequisites

• JavaScript - Events & addEventListener

Event Bubbling & Capturing

element.addEventListener('click', handler, true); // capturing
// ...
element.addEventListener('click', handler, false); // bubbling

Event Delegation

document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    alert('Clicked: ' + event.target.textContent);
  }
});

Common Pitfalls

• Not all events bubble (e.g., blur, focus).

Summary

Mastering event propagation and delegation is key to advanced DOM scripting.