Afkobling af event handlers i loop i JavaScript
Lad os nu antage, at vi ikke har ét element, men flere. For eksempel flere afsnit:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Lad os knytte funktionen func til hvert af disse afsnit
som en klik-handler:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', func);
}
function func() {
console.log(this.textContent);
}
Lad os nu omstrukturere koden, så hvert afsnit kun reagerer på det første tryk på det. For at gøre dette, når der klikkes på et afsnit, frakoppler vi den tilknyttede handler fra det. Frakoblingen vil være specifik for dette afsnit og vil ikke påvirke de andre.
Som du allerede ved, kan elementet, hvor handlingen
skete, fås i handler-funktionen
via this. Det betyder, at det er nødvendigt
at udføre frakobling af handleren fra this,
sådan her:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', func);
}
function func() {
console.log(this.textContent);
this.removeEventListener('click', func); // frakobler handleren
}
Der gives afsnit. Ved at klikke på et hvilket som helst afsnit tilføj et udråbstegn til slutningen af det. Sørg for, at denne tilføjelse kun sker ved det første tryk.
