Delegazione universale degli eventi in JavaScript

Il codice presentato nella lezione precedente funziona, tuttavia, non è privo di difetti. Analizziamo questi difetti e scriviamo una soluzione più universale.

La lacuna del nostro codice si manifesterà nel caso in cui all'interno di li ci siano alcuni tag annidati. Nel nostro caso, lascia che siano i tag 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>

In questo caso, cliccando sul tag i porterà all'aggiunta del punto esclamativo alla fine del tag i, e non al tag li, come vorremmo - poiché in event.target finisce proprio il tag in cui si è verificato l'evento.

Il problema può essere risolto utilizzando il metodo closest:

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

Ripeti la soluzione presentata.