What is event bubbling and event capturing?

In JavaScript, when an event occurs on a DOM element, it doesn't just happen at that element. Instead, the event goes through a process known as event propagation, which involves two main phases: event capturing and event bubbling. Understanding these phases is crucial for effective event handling and delegation.

Understanding Event Propagation

Event propagation describes the order in which events are fired on elements in a nested hierarchy. Imagine clicking on a paragraph that is inside a div, which is inside the body. When you click the paragraph, the event 'travels' through the DOM tree. This travel happens in two distinct phases.

Event Capturing (Trickling)

Event capturing is the first phase of event propagation. In this phase, the event starts from the outermost ancestor of the target element (typically the window or document object) and trickles down through the DOM tree towards the target element. It checks for registered event listeners along the way. If a listener is set for the capturing phase on an ancestor, it will be triggered before the event reaches the actual target.

Think of it like a scout sent ahead, reporting 'An event is coming this way!' to elements on the path to the target.

Event Bubbling

Event bubbling is the second and most commonly used phase of event propagation. After the event has reached and been handled by the target element (or passed through the capturing phase), it then bubbles up from the target element back to its immediate parent, then to its grandparent, and so on, until it reaches the document or window object. If any ancestor element has an event listener registered for the bubbling phase, it will be triggered.

This phase is particularly useful for event delegation, where you attach a single event listener to a parent element to handle events for all its descendant children.

Controlling Event Propagation with addEventListener()

The addEventListener() method allows you to specify whether your event handler should be triggered during the capturing or bubbling phase. It takes an optional third argument, useCapture (a boolean).

• If useCapture is true, the event listener will be triggered during the capturing phase.
• If useCapture is false (or omitted, as it's the default), the event listener will be triggered during the bubbling phase.

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('Parent handler (bubbling)');
}); // Default: false (bubbling)

parent.addEventListener('click', function() {
  console.log('Parent handler (capturing)');
}, true); // true (capturing)

child.addEventListener('click', function() {
  console.log('Child handler (bubbling)');
});

Stopping Propagation: event.stopPropagation()

You can prevent an event from continuing its propagation (either bubbling up or capturing down) by calling the stopPropagation() method on the event object. Once called, the event will not trigger any more listeners in the subsequent phases or elements.

const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('Button clicked!');
  event.stopPropagation(); // Prevents the event from bubbling further
});

document.body.addEventListener('click', function() {
  console.log('Body clicked!'); // This will NOT be logged if button is clicked
});

Key Differences Summary

Conclusion

Both event bubbling and event capturing are fundamental concepts in JavaScript event handling. While bubbling is more frequently used for its simplicity in event delegation, capturing provides a mechanism for intercepting events earlier in their lifecycle. A solid understanding of these phases allows developers to write more robust, efficient, and predictable event-driven applications.