Univerzální delegování událostí v JavaScriptu

Kód uvedený v předchozí lekci je funkční, avšak ne bez nedostatků. Pojďme si tyto nedostatky rozebrat a napsat univerzálnější řešení.

Nedostatek našeho kodu se projeví v případě, kdy uvnitř li budou nějaké vnořené značky. V našem případě nechť to jsou 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 případě kliknutí na značku i povede k přidání vykřičníku na konec značky i, a ne značky li, jak bychom chtěli - vždyť v event.target se dostane právě ta značka, ve které nastala událost.

Problém lze vyřešit pomocí metody closest:

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

Opakujte uvedené řešení.