Skip to main content

Event Capturing in JavaScript DOM Events

Event capturing is one of the two phases in the event propagation process, the other being event bubbling. In this tutorial, we will learn about event capturing, how it works, and the difference between event capturing and event bubbling.

What is Event Capturing?​

Event capturing is the first phase in the event propagation process. During event capturing, the event starts at the root of the DOM tree (usually the window object) and propagates down towards the target element, triggering any relevant event handlers along the way.

Event Capturing vs. Event Bubbling​

In contrast to event capturing, event bubbling is the second phase of the event propagation process. During event bubbling, the event bubbles up from the target element back to the root of the DOM tree, triggering any relevant event handlers along the way.

By default, event handlers are attached during the bubbling phase. However, you can also attach event handlers during the capturing phase by setting the third parameter of addEventListener() to true.

element.addEventListener(
  'click',
  () => {
    console.log('Event Capturing');
  },
  true
);

In this example, the event handler will be executed during the capturing phase, not the bubbling phase.

Stopping Event Capturing​

Similar to event bubbling, you can stop the event capturing phase by using the stopPropagation() method. This method prevents the event from further propagating down the DOM tree during the capturing phase.

element.addEventListener(
  'click',
  event => {
    console.log('Event Capturing - Stopped');
    event.stopPropagation();
  },
  true
);

In this example, when the event handler is executed, it stops the event capturing phase, preventing any further propagation of the event down the DOM tree.

Conclusion​

In this tutorial, we've learned about event capturing, an essential concept in JavaScript DOM event handling. We've discussed how event capturing works, how to manage it using the stopPropagation() method, and the difference between event capturing and event bubbling.

Understanding event capturing is crucial for working with DOM events in JavaScript, as it allows you to manage the behavior of your web applications and ensure a smooth user experience.