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:
<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:
list.addEventListener('click', function(event) {
let li = event.target.closest('li');
if (li) {
li.innerHTML = li.innerHTML + '!';
}
});
Repita la solución presentada.
