Universāls notikumu deleģēšana JavaScript
Iepriekšējā nodarbībā dotais kods ir strādājošs, tomēr ne bez trūkumiem. Analizēsim šos trūkumus un uzrakstīsim universālāku risinājumu.
Mūsu koda trūkums parādīsies gadījumā,
kad iekš li būs kādi ieguldie
tagi. Mūsu gadījumā lai tie būs tagi
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>
Šajā gadījumā noklikšķināšana uz taga i novedīs
pieskaitāmās zīmes pievienošanai taga
beigās i, nevis tagam li, kā
mēs vēlētos - galu galā event.target
nokļūst tieši tas tags, kurā notika
notikums.
Problēmu var atrisināt, izmantojot metodi closest:
list.addEventListener('click', function(event) {
let li = event.target.closest('li');
if (li) {
li.innerHTML = li.innerHTML + '!';
}
});
Atkārtojiet doto risinājumu.
