☕ Revisiting JavaScript Event Flow — Capturing, Target & Bubbling Phases
Today, I was revising one of the most important concepts in JavaScript — Events and Event Listeners. 💡
It’s fascinating how a single click can travel through multiple layers of the DOM before reaching its destination!
Here’s what I learned and revised 👇
🔹 Event & Event Listener
JavaScript allows us to respond to user interactions like clicks, key presses, and mouse movements.
For example 👇
element.addEventListener("click", () => {
console.log("Element clicked!");
});
This method lets us attach multiple handlers to the same element without overwriting existing ones.
🔹 Click Event
The click event is one of the most commonly used — and it’s the one I focused on today while understanding how event flow actually works.
🔹 Event Flow in JavaScript
Every event in the DOM passes through three phases:
1️⃣ Capturing Phase – The event travels from the top (document) down to the target element.
2️⃣ Target Phase – The exact element that triggered the event receives it.
3️⃣ Bubbling Phase – The event then bubbles back up toward the document.
📘 Example
// Capturing phase
parent.addEventListener("click", () => {
console.log("Parent clicked - Capturing Phase");
}, true); // true → capturing
// Bubbling phase (default)
child.addEventListener("click", () => {
console.log("Child clicked - Bubbling Phase");
});
👉 When you pass true as the third argument in addEventListener, it listens during the capturing phase.
👉 By default, it’s false, meaning the listener works in the bubbling phase.
🧠 Visual Flow
📤 Document → HTML → Body → Parent → Child → (then bubbles back up 🔁)
Understanding this complete flow helped me clearly visualize how events travel and how to control them precisely using capturing and bubbling. 🚀
A huge thanks to CoderArmy, Rohit Negi, and Aditya Tandon Sir 🙏
Your clear explanations and practical examples made this topic so easy to grasp.
#JavaScript #EventListener #EventFlow #FrontendDevelopment #WebDevelopment #LearningJourney #Coding #Developer #RohitNegi #AdityaTandon #CoderArmy
