Universel delegering af begivenheder i JavaScript

Koden vist i den forrige lektion er funktionel, men den har sine mangler. Lad os genemgå disse mangler og skrive en mere universel løsning.

Ulempen ved vores kode vil vise sig i det tilfælde, hvor der inde i li er nogle indlejrede tags. I vores tilfælde, lad det være i tags:

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 tilfælde vil et klik på i tagget føre til tilføjelsen af et udråbstegn i slutningen af tagget i, og ikke li tagget, som vi ønskede - fordi event.target netop er det tag, hvor begivenheden indtraf.

Problemet kan løses ved hjælp af metoden closest:

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