Fjerning av event handlers i løkke i JavaScript

La oss nå si at vi ikke har ett element, men flere. For eksempel, flere avsnitt:

<p>text1</p>
<p>text2</p>
<p>text3</p>

La oss knytte funksjonen func til hvert av disse avsnittene med en klikk-handler:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
}

La oss nå endre koden slik at hvert avsnitt bare reagerer på det første trykket på det. For å gjøre dette, når du klikker på et avsnitt vil vi fjerne den tilknyttede handleren fra det. Denne fjerningen vil være spesifikt for dette avsnittet, og vil ikke påvirke de andre.

Som du allerede vet, kan elementet der hendelsen skjedde, fås i handler-funksjonen via this. Dette betyr at vi må utføre fjerning av handler fra this, slik:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // fjerner handler
}

Det er gitt avsnitt. Ved å trykke på et hvilket som helst avsnitt legg til et utropstegn på slutten av det. Gjør slik at dette tillegget bare skjer ved første trykk.