जावास्क्रिप्ट में यूनिवर्सल ईवेंट डेलिगेशन

पिछले पाठ में दिया गया कोड काम करने वाला है, हालांकि, कमियों के बिना नहीं। आइए इन कमियों को समझते हैं और एक अधिक यूनिवर्सल समाधान लिखते हैं।

हमारे कोड की कमी तब सामने आएगी, जब li के अंदर कुछ नेस्टेड टैग हों। हमारे मामले में मान लीजिए कि ये टैग i हैं:

html<ul>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
</ul>

इस स्थिति में i टैग पर क्लिक करने से विस्मयादिबोधक चिह्न i टैग के अंत में जोड़ा जाएगा, न कि li टैग में, जैसा कि हम चाहेंगे - क्योंकि event.target में वही टैग आता है, जिसमें घटना घटी।

इस समस्या को closest मेथड की मदद से हल किया जा सकता है:

javascriptlist.addEventListener('click', function(event) {
  let li = event.target.closest('li');
  
  if (li) {
    li.innerHTML = li.innerHTML + '!';
  }
});