Univerzálne delegovanie udalostí v JavaScripte

Kód uvedený v predchádzajúcej lekcii je funkčný, avšak nie bez nedostatkov. Poďme tieto nedostatky rozobrať a napísať univerzálnejšie riešenie.

Nedostatok nášho kódu sa prejaví v prípade, keď vnútri li budú nejaké vnorené značky. V našom prípade nech to sú značky i:

html<ul>
  <li>položka <i>kurzíva</i> položka</li>
  <li>položka <i>kurzíva</i> položka</li>
  <li>položka <i>kurzíva</i> položka</li>
  <li>položka <i>kurzíva</i> položka</li>
  <li>položka <i>kurzíva</i> položka</li>
</ul>

V tomto prípade kliknutie na značku i povedie k pridaniu výkričníka na koniec značky i, a nie značky li, ako by sme chceli - veď do event.target sa dostane práve tá značka, v ktorej nastala udalosť.

Problém je možné vyriešiť pomocou metódy closest:

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