Afkobling af event handlers i loop i JavaScript

Lad os nu antage, at vi ikke har ét element, men flere. For eksempel flere afsnit:

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

Lad os knytte funktionen func til hvert af disse afsnit som en klik-handler:

javascriptlet 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:

javascriptlet 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
}