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:
<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:
list.addEventListener('click', function(event) {
let li = event.target.closest('li');
if (li) {
li.innerHTML = li.innerHTML + '!';
}
});
Repita a solução apresentada.
