What is Event Bubbling in JavaScript?

In JavaScript, event bubbling refers to how events propagate up through the DOM hierarchy. When an element triggers an event, like a click, the event is first activated on that element and then it bubbles up through its parent elements until it reaches the document object.

How Event Bubbling Works?

When an event occurs on an element, the event is first triggered on that element. Then, the event “bubbles up” through the DOM hierarchy, triggering the same event on each parent element of the original element.

For example, if a user clicks on a button within a div element, the click event will be triggered on the button first. Then, the event will “bubble up” through the div element, triggering the same click event on the div. Finally, the event will reach the document object, triggering the same click event on the document.

Event Propagation Phases

There are three phases of event propagation in JavaScript:

Capturing phase
Target phase
Bubbling phase

During the capturing phase, the event is propagated from the top of the DOM hierarchy down to the target element. Then, during the target phase, the event is triggered on the target element. Finally, during the bubbling phase, the event is propagated up through the DOM hierarchy until it reaches the document object.

Event.stopPropagation()

Sometimes, you may want to stop the event from bubbling up through the DOM hierarchy. To do this, you can use the event.stopPropagation() method.

For example, let’s say you have a button element within a div element. When the user clicks on the button, you want to trigger a function on the button element, but you don’t want the click event to propagate up to the div element. You can use event.stopPropagation() to achieve this:

document.querySelector('button').addEventListener('click', function(event) {
  event.stopPropagation();
  // trigger function on button element
});

Event Delegation

Event delegation is a technique in JavaScript that allows you to handle events on multiple elements with a single event listener. Instead of adding event listeners to each individual element, you can add a single event listener to a parent element and use event bubbling to handle events on its child elements.

For example, let’s say you have a list of items, and you want to handle clicks on each individual item. Instead of adding a click event listener to each individual item, you can add a single click event listener to the parent element and use event delegation to handle clicks on its child elements:

document.querySelector('ul').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    // handle click on list item
  }
});

Conclusion

Event bubbling is a powerful concept in JavaScript that allows you to handle events on multiple elements with ease. By understanding how event propagation works and using techniques like event delegation, you can write more efficient and maintainable JavaScript code.

https://www.linkedin.com/company/scribblers-den/

https://www.facebook.com/scribblersden.blogs

Thank You