Universell delegasjon av hendelser i JavaScript

Koden presentert i forrige leksjon er funksjonell, men den har noen ulemper. La oss analysere disse ulempene og skrive en mer universell løsning.

Ulempen med koden vår vil vises i tilfellet når det inne i li er noen nestede tagger. I vårt tilfelle, la disse være taggene 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 dette tilfellet vil et klikk på taggen i føre til tillegget av et utropstegn på slutten av taggen i, og ikke taggen li, som vi ønsker - tross alt, i event.target kommer nettopp den taggen der hendelsen inntraff.

Problemet kan løses ved hjelp av metoden closest:

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