Univerzálne delegovanie udalostí v JavaScripte

Kód uvedený v predchádzajúcej lekcii je funkčný, avšak nie bez nedostatkov. Poďme tieto nedostatky rozobrať a napísať univerzálnejšie riešenie.

Nedostatok nášho kódu sa prejaví v prípade, keď vnútri li budú nejaké vnorené značky. V našom prípade nech to sú značky i:

<ul>
	<li>položka <i>kurzíva</i> položka</li>
	<li>položka <i>kurzíva</i> položka</li>
	<li>položka <i>kurzíva</i> položka</li>
	<li>položka <i>kurzíva</i> položka</li>
	<li>položka <i>kurzíva</i> položka</li>
</ul>

V tomto prípade kliknutie na značku i povedie k pridaniu výkričníka na koniec značky i, a nie značky li, ako by sme chceli - veď do event.target sa dostane práve tá značka, v ktorej nastala udalosť.

Problém je možné vyriešiť pomocou metódy closest:

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

Zopakujte uvedené riešenie.