Delegazione universale degli eventi in JavaScript

Il codice presentato nella lezione precedente funziona, tuttavia, non è privo di difetti. Analizziamo questi difetti e scriviamo una soluzione più universale.

La lacuna del nostro codice si manifesterà nel caso in cui all'interno di li ci siano alcuni tag annidati. Nel nostro caso, lascia che siano i tag 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>

In questo caso, cliccando sul tag i porterà all'aggiunta del punto esclamativo alla fine del tag i, e non al tag li, come vorremmo - poiché in event.target finisce proprio il tag in cui si è verificato l'evento.

Il problema può essere risolto utilizzando il metodo closest:

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