Universell delegering av händelser i JavaScript

Koden som presenterades i föregående lektion är fungerande, men den har sina brister. Låt oss gå igenom dessa brister och skriva en mer universell lösning.

Bristen i vår kod kommer att visa sig i det fall det finns några kapslade taggar inuti li. I vårt fall, låt dessa vara i-taggar:

<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>

I detta fall kommer ett klick på i-taggen att leda till att ett utropstecken läggs till i slutet av taggen i, och inte i li-taggen, som vi skulle vilja - trots allt hamnar i event.target just den taggen där händelsen inträffade.

Problemet kan lösas med metoden closest:

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

Upprepa den presenterade lösningen.