Event Delegation & Event Bubbling Kya Hote Hai?

Event Bubbling Kya Hoti Hai?

JavaScript mein event bubbling ek aisa process hai jisme jab kisi nested element (jaise <button> inside <div>) par koi event trigger hota hai, toh wo event sabse pehle uss element par handle hota hai, phir uske parent element par, aur aise hi upar ki taraf (root element tak) propagate hota hai. Ise hi "bubble up" hona kehte hain.

Yeh browser ka default behavior hai. Event bubbling humein Event Delegation jaise powerful patterns ko implement karne me madad karti hai.

<!-- HTML -->
<div id="parent">
  <button id="child">Click Me</button>
</div>

<!-- JavaScript -->
document.getElementById("child").addEventListener("click", function () {
  console.log("Child button clicked!");
});

document.getElementById("parent").addEventListener("click", function () {
  console.log("Parent div clicked!");
});

// Jab aap button par click karenge, toh console me output aayega:
// Child button clicked!
// Parent div clicked!

Event Delegation Kya Hota Hai?

Event delegation ek aisi technique hai jisme hum har ek child element par alag-alag event listener lagane ke bajaye, unke parent element par sirf ek event listener lagate hain.

Jab kisi child element par event trigger hota hai, toh event bubbling ke kaaran woh parent tak pahunchta hai. Parent par laga listener uss event ko handle karta hai. Is approach se performance behtar hoti hai aur code clean rehta hai, khaas kar jab elements dynamically add ya remove ho rahe hon.

<!-- HTML -->
<ul id="itemList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

<!-- JavaScript -->
document.getElementById("itemList").addEventListener("click", function (event) {
  // Check if the clicked element is an <li>
  if (event.target && event.target.tagName === 'LI') {
    console.log("You clicked on:", event.target.textContent);
  }
});

Is example me, humne sirf `ul` par ek listener lagaya. `event.target` ki madad se hum pata laga rahe hain ki kaun sa `li` click hua.

Key Takeaways

• Event Bubbling: Event ka child element se parent elements tak upar jaana.
• Event Delegation: Parent element par ek listener lagakar multiple child elements ke events handle karna.
• Event delegation performance ko improve karta hai aur code ko maintainable banata hai.
• event.stopPropagation() ka use karke bubbling ko roka ja sakta hai.