Универсално делегиране на събития в JavaScript

Кодът, даден в предишния урок, е работещ, но не е без недостатъци. Нека разгледаме тези недостатъци и напишем по-универсално решение.

Недостатъкът на нашия код ще се прояви в случая, когато вътре в 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 + '!';
	}
});

Повторете даденото решение.