What is event bubbling in JavaScript?

Event bubbling is a concept in JavaScript’s event handling system where an event triggered on a child element “bubbles up” and is also triggered on its parent elements, all the way up to the root of the document. This means when you click on a nested element, the click event doesn’t just fire on that element but also on its ancestors unless explicitly stopped. ### How Event Bubbling Works: Imagine you have a button inside a div, which is inside the body. If you click the button, the click event first fires on the button itself, then on the div containing it, and then on the body, continuing upward through the DOM tree. This allows for flexible handling of events at different levels of the DOM without attaching event listeners to every single element. ### Example: ```html Parent Div Click Me const parent = document.getElementById('parent'); const child = document.getElementById('child'); child.addEventListener('click', () => { alert('Button clicked!'); }); parent.addEventListener('click', () => { alert('Parent div clicked!'); }); ``` If you click the button, you will see two alerts: first “Button clicked!” then “Parent div clicked!”. The event fired on the button bubbles up to the parent div, triggering its event listener as well. ### Preventing Event Bubbling: If you want to stop the event from bubbling up, you can call `event.stopPropagation()` inside the event handler: ```js child.addEventListener('click', (event) => { alert('Button clicked!'); event.stopPropagation(); // Stops the event from bubbling further }); ``` Now, clicking the button will only alert “Button clicked!” and not trigger the parent div’s click event. --- In summary, event bubbling is the mechanism by which events propagate from the deepest element that was interacted with up through its ancestors, allowing event handling at multiple levels in the DOM tree. It’s a fundamental concept to understand for effective event management in JavaScript.