Universell delegasjon av hendelser i JavaScript
Koden presentert i forrige leksjon er funksjonell, men den har noen ulemper. La oss analysere disse ulempene og skrive en mer universell løsning.
Ulempen med koden vår vil vises i tilfellet
når det inne i li er noen nestede
tagger. I vårt tilfelle, la disse være taggene
i:
<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>
I dette tilfellet vil et klikk på taggen i føre
til tillegget av et utropstegn på slutten
av taggen i, og ikke taggen li, som
vi ønsker - tross alt, i event.target
kommer nettopp den taggen der hendelsen
inntraff.
Problemet kan løses ved hjelp av metoden closest:
list.addEventListener('click', function(event) {
let li = event.target.closest('li');
if (li) {
li.innerHTML = li.innerHTML + '!';
}
});
Gjenta den presenterte løsningen.
