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

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

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

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

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