Universaali tapahtumien delegointi JavaScriptissä

Edellisessä oppitunnissa esitetty koodi on toimiva, mutta ei vailla puutteita. Käydään läpi nämä puutteet ja kirjoitetaan universaalimpi ratkaisu.

Koodimme puute tulee esille siinä tapauksessa, kun li:n sisällä on sisäkkäisiä tageja. Olkoot nämä meidän tapauksessamme i-tagit:

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>

Tässä tapauksessa i-tagia klikkaaminen johtaa huutomerkin lisäämiseen tagin loppuun i, eikä li-tagiin, kuten toivoisimme - loppujen lopuksi event.target:iin pääsee juuri se tagi, jossa tapahtuma sattui.

Ongelman voi ratkaista closest-metodin avulla:

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