JS इवेंट डेलिगेशन

Event Delegation क्या है?

Event delegation एक parent को कई child elements के events संभालने देता है। यह event bubbling इस्तेमाल करता है।

चूंकि bubbling event को हर ancestor के ज़रिए ऊपर ले जाता है, एक shared parent पर एक single listener event.target जांचकर पता लगा सकता है कि असल में किस खास child के साथ interact किया गया।

उदाहरण: What Is Event Delegation?

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<script>
  document.getElementById("list").addEventListener("click", (e) => {
    // Print `"Clicked:", e.target.textContent` to the console
    console.log("Clicked:", e.target.textContent);
  });
</script>

Event Delegation क्यों इस्तेमाल करें?

Delegation event listeners की संख्या कम करता है। यह lists और दूसरे dynamic content के लिए उपयोगी है।

हर child item पर एक के बजाय किसी container पर एक listener लगाना बेहतर scale करता है और कम memory इस्तेमाल करता है, खासतौर पर लंबी या बार-बार बदलने वाली lists के लिए।

उदाहरण: Why Use Event Delegation?

<ul id="list">
  <li>A</li><li>B</li><li>C</li>
</ul>
<script>
  // Listen for the `click` event on `document.getElementById("list")` and run the handler when it fires
  document.getElementById("list").addEventListener("click", (e) => console.log(e.target.textContent));
</script>

Dynamic Elements संभालना

एक delegated listener उन elements के लिए भी काम करता है जो listener बनने के बाद जोड़े गए। यह delegation के सबसे बड़े practical फायदों में से एक है: जब भी delegated container में नए elements डाले जाएं तो आपको listeners दोबारा attach करने की ज़रूरत नहीं।

उदाहरण: Handling Dynamic Elements

<ul id="list"><li>Old Item</li></ul>
<script>
  const list = document.getElementById("list");
  list.addEventListener("click", (e) => console.log("Clicked:", e.target.textContent));
  const newItem = document.createElement("li");
  newItem.textContent = "New Item";
  list.appendChild(newItem); // still handled by the same listener
</script>

closest() इस्तेमाल करना

closest method किसी nested element पर event शुरू होने पर सबसे पास के matching ancestor को ढूंढने में मदद करता है।

चूंकि असली click target खुद item के बजाय एक nested element हो सकता है, closest() भरोसेमंद तरीके से ऊपर जाकर वह enclosing element ढूंढता है जिसकी आपको असल में परवाह है।

उदाहरण: Using closest()

<ul id="list">
  <li><span>Item</span></li>
</ul>
<script>
  document.getElementById("list").addEventListener("click", (e) => {
    // Declare the constant `item`, set to `e.target.closest("li")`
    const item = e.target.closest("li");
    // Print `item.textContent` to the console
    console.log(item.textContent);
  });
</script>

Practical Delegation

Event delegation तब एक अच्छा विकल्प है जब कई समान elements को एक जैसे event व्यवहार की ज़रूरत हो। किसी to-do list जैसी चीज़ों के लिए delegation standard approach है जहाँ items dynamically जोड़े और हटाए जाते हैं, लगातार listener management से बचते हुए।

उदाहरण: Practical Delegation

<ul id="todo-list">
  <li>Buy milk</li>
  <li>Walk dog</li>
</ul>
<script>
  document.getElementById("todo-list").addEventListener("click", (e) => {
    // Print `"Task clicked:", e.target.textContent` to the console
    console.log("Task clicked:", e.target.textContent);
  });
</script>