SahilLog: Web Dev Day 12: Event Bubbling & Capturing

📅 Date: April 19, 2026

🧠 Mood: The Architect 🏛️

🔥 Topic: Web Dev Day 12: Event Bubbling & Capturing

📉 The Invisible Trap

Yesterday, I figured out how to make a button listen to my clicks using JavaScript events. It felt straightforward. You click the element, the function runs. But today, while trying to build a complex nested layout for a project, I ran into a bizarre bug that completely broke my logic.

I had a small "Delete" button placed inside a larger "Profile Card" div. I added a click event to the button to delete the user, and a click event to the card to open the profile details. But every time I clicked "Delete", both functions fired simultaneously. The user was deleted, but the profile page still tried to open, resulting in a massive console error.

That is when I learned the brutal reality of the DOM: Clicking a child element means you are simultaneously clicking every single parent element it sits inside. This phenomenon is known as Event Propagation, and it happens in two distinct phases: Capturing and Bubbling.

🌊 The Ripple Effect: Bubbling vs Capturing

Imagine throwing a stone into a pond. The ripple starts at the center and expands outward. JavaScript events work similarly across the DOM tree.

1. Event Bubbling (Bottom-Up)

This is the default behavior in modern browsers. When you click a button, the event triggers on the button first. Then, it "bubbles" up to the button's parent container, then to the grandparent container, all the way up to the <html> root. If any of those parents also have click listeners, they will execute in sequence.

2. Event Capturing (Top-Down)

Also known as the "Trickle Down" phase. This is the exact opposite. The browser starts at the very top of the document root and travels down through the parents until it finally hits the specific target button you clicked. You have to explicitly tell JavaScript to use this mode.

💻 The Fix: Stopping the Propagation

To fix my broken profile card, I didn't need to rewrite my HTML. I just needed to tell JavaScript to stop the ripple effect. We do this using a powerful built-in method called stopPropagation().

const profileCard = document.querySelector('.card');
const deleteBtn = document.querySelector('.delete-btn');

// Parent Event
profileCard.addEventListener('click', function() {
    console.log("Opening Profile Details...");
});

// Child Event
deleteBtn.addEventListener('click', function(event) {
    
    // 🔥 THE FIX: This stops the event from bubbling up to the card!
    event.stopPropagation(); 
    
    console.log("Deleting User Profile...");
});

By simply adding event.stopPropagation() to the child button, the event fires, does its job, and immediately dies. The parent card never even knows a click happened. Bug fixed.

🎯 The Golden Rule

Understanding the DOM tree is crucial. Whenever an event is firing twice or doing something unexpected, check your propagation path. Tomorrow, we move on to Asynchronous JavaScript. It's time to learn how the web handles time delays without freezing the browser.

SahilLog

Web Dev Day 12: Event Bubbling & Capturing