Delegación universal de eventos en JavaScript

El código presentado en la lección anterior funciona, sin embargo, no carece de defectos. Analicemos estos defectos y escribamos una solución más universal.

La desventaja de nuestro código se manifestará en el caso en que dentro de li haya algunas etiquetas anidadas. En nuestro caso, que sean las etiquetas 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>

En este caso, hacer clic en la etiqueta i llevará a agregar un signo de exclamación al final de la etiqueta i, y no a la etiqueta li, como nos gustaría - porque en event.target cae exactamente la etiqueta en la que ocurrió el evento.

El problema se puede resolver usando el método closest:

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