Universel delegering af begivenheder i JavaScript

Koden vist i den forrige lektion er funktionel, men den har sine mangler. Lad os genemgå disse mangler og skrive en mere universel løsning.

Ulempen ved vores kode vil vise sig i det tilfælde, hvor der inde i li er nogle indlejrede tags. I vores tilfælde, lad det være i tags:

<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 dette tilfælde vil et klik på i tagget føre til tilføjelsen af et udråbstegn i slutningen af tagget i, og ikke li tagget, som vi ønskede - fordi event.target netop er det tag, hvor begivenheden indtraf.

Problemet kan løses ved hjælp af metoden closest:

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

Gentag den viste løsning.