Delegação Universal de Eventos em JavaScript

O código apresentado na lição anterior funciona, mas não é sem defeitos. Vamos analisar essas deficiências e escrever uma solução mais universal.

A desvantagem do nosso código se manifestará no caso, quando dentro do li houver alguma tag aninhada. No nosso caso, que sejam as tags i:

html<ul>
  <li>item <i>itálico</i> item</li>
  <li>item <i>itálico</i> item</li>
  <li>item <i>itálico</i> item</li>
  <li>item <i>itálico</i> item</li>
  <li>item <i>itálico</i> item</li>
</ul>

Neste caso, clicar na tag i levará à adição de um ponto de exclamação no final da tag i, e não na tag li, como gostaríamos - porque em event.target está exatamente a tag onde o evento ocorreu.

O problema pode ser resolvido usando o método closest:

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