What is event bubbling and capturing?

 

Event bubbling and event capturing are two phases of event propagation in the Document Object Model (DOM) in web development. They describe the order in which events are delivered to elements in the DOM tree when an event occurs on a nested element. Understanding these two phases is important for handling events in a web application effectively.

1. Event Bubbling:

   In the event bubbling phase, the innermost element's event is handled first, and then the event bubbles up through its ancestors in the DOM tree, triggering their corresponding event handlers in sequence.

   Here's a simplified example:

   html

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

javascript

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

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

When you click the button, the output in the console will be:

Child clicked
Parent clicked

First, the click event on the button (child) is handled, and then it bubbles up to the div (parent) and triggers its click event handler.

Event Capturing:

In the event capturing phase, the event is captured at the highest level of the DOM hierarchy (usually the root element) and then trickles down to the target element. The event handlers on the ancestors are called first, and then the target element's event handler is called.

To use event capturing, you can set the third parameter of the addEventListener method to true.

Here's an example:

html

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

javascript

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

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

When you click the button, the output in the console will be:

2. Parent captured
   Child clicked
   

   In this case, the capturing phase starts at the root and proceeds down the DOM tree until it reaches the target element, triggering the event handlers in that order.

Event bubbling and capturing allow you to control how events propagate through the DOM hierarchy. By default, most events use event bubbling, but you can switch to event capturing by setting the third parameter of addEventListener to true. Understanding these phases is helpful when dealing with complex DOM structures and event handling scenarios.