Универзално делегирање на настани во JavaScript

Кодот претставен во претходната лекција е функционален, сепак, не е без недостатоци. Ајде да ги разгледаме овие недостатоци и да напишеме поуниверзално решение.

Недостатокот на нашиот код ќе се maniфестира во случајот, кога во внатрешноста на li има вгнездени тагови. Во нашиот случај нека тоа бидат таговите i:

<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 ќе доведе до додавање на извичник на крајот на тагот i, а не на тагот li, како што ние би сакале - бидејќи во event.target пропаѓа токму оној таг во кој се случил настанот.

Проблемот може да се реши со помош на методот closest:

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

Повторете го прикажаното решение.