Delegim Universal i Ngjarjeve në JavaScript

Kodi i paraqitur në mësimin e mëparshëm është funksional, megjithatë, jo pa të meta. Le të shqyrtojmë këto të meta dhe të shkruajmë një zgjidhje më universale.

E meta e kodit tonë do të shfaqet në rastin kur brenda li ka etiketa të mbivendosur. Në rastin tonë, le të jenë ato etiketat 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>

Në këtë rast, klikimi në etiketën i do të çojë në shtimin e shenjës së pikëçuditës në fund të etiketës i, dhe jo në etiketën li, siç do të dëshironim - në fund të fundit, në event.target hyn pikërisht ajo etiketë në të cilën ndodhi ngjarja.

Problemi mund të zgjidhet duke përdorur metodën closest:

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