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:
<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:
list.addEventListener('click', function(event) {
let li = event.target.closest('li');
if (li) {
li.innerHTML = li.innerHTML + '!';
}
});
Ponovite dato rešenje.
