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:

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>

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

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