What is the difference between event bubbling and capturing? When should one use bubbling vs capturing?

 

Event bubbling and event capturing are two different phases of event propagation in the Document Object Model (DOM), and they determine the order in which event handlers are invoked when an event occurs on a nested element. Here are the key differences between them:

Event Bubbling:

1. Order: In event bubbling, the event starts from the target element and then bubbles up through its ancestors in the DOM hierarchy.

2. Default Behavior: Event bubbling is the default behavior for most events in the DOM.

3. Event Handler Execution Order: The event handler on the target element is executed first, followed by the event handlers on its ancestors, in sequence from the target element to the root.

Event Capturing:

1. Order: In event capturing, the event starts from the root element and trickles down through the ancestors to the target element.

2. Explicit Usage: Event capturing must be explicitly enabled by setting the third parameter of the addEventListener method to true.

3. Event Handler Execution Order: Event handlers on ancestors are executed first, starting from the root and moving toward the target element. Then, the event handler on the target element is executed.

When to Use Bubbling vs. Capturing:

1. Event Bubbling:

   • Use event bubbling when you want to handle an event at a specific element and then potentially let the event propagate up to higher-level containers.
   • It's useful when you want to delegate event handling to a common ancestor of multiple elements with the same event type, reducing the number of event listeners.

2. Event Capturing:

   • Use event capturing when you want to capture an event at a higher-level container element before it reaches a specific target element.
   • It's less commonly used than bubbling but can be useful for certain scenarios, like intercepting events before they reach the intended target.

Example:

Consider an HTML structure with nested elements:

html

<div id="parent">
  <button id="child">Click me</button>
</div>

Here's an example in JavaScript that demonstrates event bubbling and capturing:

javascript

document.getElementById('parent').addEventListener('click', function () {
  console.log('Parent (Bubbling)');
});

document.getElementById('child').addEventListener('click', function () {
  console.log('Child (Bubbling)');
});

document.getElementById('parent').addEventListener(
  'click',
  function () {
    console.log('Parent (Capturing)');
  },
  true
);

document.getElementById('child').addEventListener(
  'click',
  function () {
    console.log('Child (Capturing)');
  },
  true
);

• When you click the "Click me" button, you'll see the following output for bubbling:

  scss

Child (Bubbling)
Parent (Bubbling)

When you click the "Click me" button, you'll see the following output for capturing:

scss

• Parent (Capturing)
  Child (Capturing)
  

This example demonstrates the order in which event handlers are invoked based on whether bubbling or capturing is used. The true parameter in the addEventListener method enables capturing for an element. You can choose the propagation phase that best suits your event handling needs based on your application's structure and requirements.