JavaScript Interview Question #66

What does event.stopPropagation() do?

DOM, Events & Event Loop Fundamentals Mid-Level Intermediate

Quick Interview Answer

stopPropagation prevents an event from continuing through later ancestors in the capturing or bubbling propagation path. It does not automatically cancel the browser's default action.

Detailed Explanation

stopPropagation prevents an event from continuing through later ancestors in the capturing or bubbling propagation path. It does not automatically cancel the browser's default action.

It should be used deliberately because excessive propagation blocking can make component behavior harder to understand and can interfere with event delegation or other legitimate listeners.

Code Example

const child = document.querySelector("#child");

child.addEventListener("click", event => {
    event.stopPropagation();
    console.log("Parent bubbling handler will not receive this event");
});