Délégation d'événements universelle en JavaScript

Le code présenté dans la leçon précédente fonctionne, cependant, il n'est pas sans défauts. Analysons ces défauts et écrivons une solution plus universelle.

L'inconvénient de notre code apparaîtra dans le cas où à l'intérieur de li il y aura des balises imbriquées. Dans notre cas, que ce soient les balises 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>

Dans ce cas, un clic sur la balise i entraînera l'ajout d'un point d'exclamation à la fin de la balise i, et non à la balise li, comme nous le souhaiterions - car dans event.target se trouve précisément la balise où l'événement s'est produit.

Le problème peut être résolu en utilisant la méthode closest :

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

Répétez la solution présentée.