JavaScript Interview Question #63

What is event bubbling?

DOM, Events & Event Loop Fundamentals Mid-Level Intermediate

Quick Interview Answer

Event bubbling is the phase in which an event that originated on a descendant propagates upward through its ancestors. For many common events, listeners registered in the default mode run during this bubbling phase.

Detailed Explanation

Bubbling enables event delegation because a parent element can handle events generated by dynamically changing child elements.

Code Example

document.querySelector("#parent")
    .addEventListener("click", () => {
        console.log("Parent handler");
    });

document.querySelector("#child")
    .addEventListener("click", () => {
        console.log("Child handler");
    });

// Clicking child normally logs child, then parent.