Both methods are used to control event propagation, but they stop events at different levels.
🔹 event.stopPropagation()
What it does
- Stops the event from bubbling up to parent elements
- Does NOT stop other event listeners on the same element
Example
button.addEventListener("click", () => {
console.log("Listener 1");
});
button.addEventListener("click", (e) => {
e.stopPropagation();
console.log("Listener 2");
});
button.addEventListener("click", () => {
console.log("Listener 3");
});
✅ Output
Listener 1
Listener 2
Listener 3
🧠 Explanation
- Event does not reach parent
- All listeners on the same element still run
🔹 event.stopImmediatePropagation()
What it does
- Stops the event from:
- Bubbling to parent elements ❌
- Executing any remaining listeners on the same element ❌
Example
button.addEventListener("click", () => {
console.log("Listener 1");
});
button.addEventListener("click", (e) => {
e.stopImmediatePropagation();
console.log("Listener 2");
});
button.addEventListener("click", () => {
console.log("Listener 3");
});
✅ Output
Listener 1
Listener 2
🧠 Explanation
- Event propagation stops completely
- Listener 3 never runs
🔥 Key Differences (Quick Table)
| Feature | stopPropagation | stopImmediatePropagation |
|---|---|---|
| Stops bubbling | ✅ | ✅ |
| Stops capturing | ✅ | ✅ |
| Stops other listeners on same element | ❌ | ✅ |
| Scope | Parent elements only | Same element + parents |
🎯 When to Use Which?
✔ Use stopPropagation()
- Prevent parent handlers
- Allow multiple listeners on same element
✔ Use stopImmediatePropagation()
- Prevent everything else
- Avoid duplicate handlers
- Advanced control scenarios
🎯 Short Interview Answer
stopPropagation()prevents the event from bubbling to parent elements but allows other listeners on the same element to run.stopImmediatePropagation()stops the event completely, preventing both bubbling and execution of remaining listeners on the same element.
⭐ One-line summary
stopPropagation stops the climb; stopImmediatePropagation stops everything.
