Universell delegering av händelser i JavaScript

Koden som presenterades i föregående lektion är fungerande, men den har sina brister. Låt oss gå igenom dessa brister och skriva en mer universell lösning.

Bristen i vår kod kommer att visa sig i det fall det finns några kapslade taggar inuti li. I vårt fall, låt dessa vara i-taggar:

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 detta fall kommer ett klick på i-taggen att leda till att ett utropstecken läggs till i slutet av taggen i, och inte i li-taggen, som vi skulle vilja - trots allt hamnar i event.target just den taggen där händelsen inträffade.

Problemet kan lösas med metoden closest:

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