Universele event delegatie in JavaScript

De code uit de vorige les werkt, maar heeft toch enkele tekortkomingen. Laten we deze tekortkomingen bekijken en een meer universele oplossing schrijven.

Het nadeel van onze code zal zichtbaar worden in het geval dat zich binnen de li geneste tags bevinden. In ons geval laten we dit de i tags zijn:

<ul>
	<li>item <i>cursief</i> item</li>
	<li>item <i>cursief</i> item</li>
	<li>item <i>cursief</i> item</li>
	<li>item <i>cursief</i> item</li>
	<li>item <i>cursief</i> item</li>
</ul>

In dit geval zal een klik op de i tag leiden tot het toevoegen van een uitroepteken aan het einde van de i tag, en niet aan de li tag, zoals we zouden willen - omdat in event.target precies die tag terechtkomt waar de gebeurtenis plaatsvond.

Het probleem kan worden opgelost met de methode closest:

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

Herhaal de gepresenteerde oplossing.