Univerzalno delegiranje događaja u JavaScript-u

Kod dat u prethodnoj lekciji je funkcionalan, međutim, nije bez mana. Hajde da analiziramo te mane i napišemo univerzalnije rešenje.

Mana našeg koda će se ispoljiti u slučaju kada unutar li postoje ugniježđeni tagovi. U našem slučaju neka to budu tagovi i:

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

U ovom slučaju, klik na tag i će dovesti do dodavanja uzvičnika na kraj taga i, a ne taga li, kao što bismo želeli – jer u event.target se nalazi upravo onaj tag u kojem se događaj desio.

Problem se može rešiti pomoću metode closest:

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