🧠 Event Bubbling in JavaScript

Event Bubbling is one of the core concepts of the DOM Event Model in JavaScript. It describes how events propagate (travel) through the DOM tree when an event is triggered.

🔁 What is Event Bubbling?

When an event occurs on a nested element (like a button inside a div), it first runs the event handler on the target element, and then it "bubbles up" the DOM tree to its ancestors — triggering any matching event handlers on parent elements, all the way up to the root.

  <div id="parent">
    <button id="child">Click Me</button>
  </div>
  
  document.getElementById('parent').addEventListener('click', () => {
    console.log('Parent clicked');
  });
  
  document.getElementById('child').addEventListener('click', () => {
    console.log('Child clicked');
  });
      

🌳 Event Propagation Phases

1. Capturing Phase: The event travels from the root down to the target element (rarely used).
2. Target Phase: The event reaches the actual element where it occurred.
3. Bubbling Phase: The event bubbles back up to the root, calling handlers along the way.

✋ How to Stop Event Bubbling

You can stop the bubbling using the event.stopPropagation() method:

  document.getElementById('child').addEventListener('click', (e) => {
    e.stopPropagation();
    console.log('Child clicked (no bubbling)');
  });
      

🧪 Use Cases of Event Bubbling

• Event Delegation: Attach one handler on a parent to manage events on many child elements dynamically.
• Performance: Reduces memory usage by minimizing the number of event listeners.
• Dynamic UI: Handle events for elements added later to the DOM.

⚠️ Things to Remember

• By default, most event listeners use the bubbling phase.
• To use the capturing phase, pass { capture: true } as the third argument.
• Use stopPropagation() carefully, as it can break functionality if overused.