Both event listeners will execute — but the capturing one runs first.
🔁 Event Order on the SAME Element
When an event is triggered on an element, the execution order is:
- Capturing phase listener
- Target phase
- Bubbling phase listener
So if the same element has:
- one listener in capturing
- one listener in bubbling
👉 Capturing listener executes first, then the bubbling listener.
🧪 Example
<button id="btn">Click</button>
const btn = document.getElementById("btn");
btn.addEventListener(
"click",
() => console.log("Capturing"),
true
);
btn.addEventListener(
"click",
() => console.log("Bubbling"),
false
);
✅ Output when button is clicked
Capturing
Bubbling
🧠 Why This Happens
- Event travels downward during capturing
- Reaches the target
- Then travels upward during bubbling
- Even on the same element, capturing runs before bubbling
⚠️ Important Edge Case
If event.stopPropagation() is called inside capturing, bubbling will not run.
btn.addEventListener("click", (e) => {
e.stopPropagation();
console.log("Capturing");
}, true);
➡ Only capturing runs.
🎯 Short Interview Answer
If an element has both capturing and bubbling listeners for the same event, the capturing listener executes first, followed by the bubbling listener. This is because capturing happens before the target and bubbling phases.
⭐ One-line summary
On the same element, capturing runs first, bubbling runs after — unless propagation is stopped.
