What is event bubbling and capturing in JavaScript?

When an event happens on an element, it travels in two phases.

• Capturing: from the top (window) down to the target.
• Bubbling: from the target back up to the top. This is the default for listeners.

parent.addEventListener("click", () => console.log("parent"));
child.addEventListener("click", () => console.log("child"));
// click on child

Output:

To listen in the capturing phase pass true or { capture: true } as the third argument. Stop the travel with event.stopPropagation().

• Previous Interview Question
• Next Interview Question

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.