Универзално делегирање догађаја у JavaScript-у

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

Недостатак нашег кода ће се појавити у случају када унутар li елемената постоје унутрашњи тагови. У нашем случају, нека то буду i тагови:

<ul>
	<li>ставка <i>италик</i> ставка</li>
	<li>ставка <i>италик</i> ставка</li>
	<li>ставка <i>италик</i> ставка</li>
	<li>ставка <i>италик</i> ставка</li>
	<li>ставка <i>италик</i> ставка</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 + '!';
	}
});

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