Univerzální delegování událostí v JavaScriptu

Kód uvedený v předchozí lekci je funkční, avšak ne bez nedostatků. Pojďme si tyto nedostatky rozebrat a napsat univerzálnější řešení.

Nedostatek našeho kodu se projeví v případě, kdy uvnitř li budou nějaké vnořené značky. V našem případě nechť to jsou 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 případě kliknutí na značku i povede k přidání vykřičníku na konec značky i, a ne značky li, jak bychom chtěli - vždyť v event.target se dostane právě ta značka, ve které nastala událost.

Problém lze vyřešit pomocí metody closest:

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