Universalus įvykių delegavimas JavaScript

Ankstesnėje pamokoje pateiktas kodas veikia, tačiau ne be trūkumų. Panagrinėkime šiuos trūkumus ir sukurkime universalesnį sprendimą.

Mūsų kodo trūkumas pasireikš tuo atveju, kai li viduje bus kokie nors įdėtieji žymėjimo kalbos elementai. Mūsų atveju tebūnie tai i elementai:

html<ul>
  <li>elementas <i>kursyvas</i> elementas</li>
  <li>elementas <i>kursyvas</i> elementas</li>
  <li>elementas <i>kursyvas</i> elementas</li>
  <li>elementas <i>kursyvas</i> elementas</li>
  <li>elementas <i>kursyvas</i> elementas</li>
</ul>

Šiuo atveju paspaudus i elementą, bus pridėtas šauktukas į elemento pabaigą i, o ne li elemente, kaip mes norėtume - juk į event.target pateksia būtent tas elementas, kuriame įvyko įvykis.

Problemą galima išspręsti naudojant metodą closest:

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