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:
<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:
list.addEventListener('click', function(event) {
let li = event.target.closest('li');
if (li) {
li.innerHTML = li.innerHTML + '!';
}
});
Toista esitetty ratkaisu.
