What is Event Bubbling in JavaScript | JavaScript Tutorials in Hindi | Interview Question #27

Event bubbling is a behavior in JavaScript where events triggered on a nested element will “bubble up” and trigger events on all of its parent elements, all the way up to the document object, unless the propagation of the event is explicitly stopped.

For example, consider a button element nested within a div element. If the button is clicked, a click event will be triggered on the button element, which will then “bubble up” to the div element, and then to any other parent elements, such as the body and document object. Each parent element can handle the event if it has a corresponding event listener attached to it.

This behavior can be useful in certain scenarios where you want to handle an event on multiple elements with a single event listener attached to a parent element. However, it can also lead to unintended consequences if the propagation of the event is not handled properly, such as triggering unwanted events on parent elements.

To stop the event bubbling, you can use the stopPropagation() method on the event object, which prevents the event from propagating any further.