What is event bubbling

Event bubbling is a type of event propagation in which an event first triggers on the innermost target element (the one the user interacted with), and then bubbles up through its ancestors in the DOM hierarchy — eventually reaching the outermost elements, like the document or window.

By default, event listeners in JavaScript are triggered during the bubbling phase, unless specified otherwise.

<button class="child">Hello</button>

<script>
const parent = document.querySelector("div");
const child = document.querySelector(".child");

// Bubbling phase (default)
parent.addEventListener("click", function () {
console.log("Parent");
});

child.addEventListener("click", function () {
console.log("Child");
});
</script>
//Child
//Parent

Here, at first, the event triggers on the child button. Thereafter it bubbles up and triggers the parent div's event handler.