Afbinding af anonyme funktioner i JavaScript

Lad os nu antage, at vores afsnit har en anonym funktion bundet til sig:

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

for (let elem of elems) {
  elem.addEventListener('click', function() {
    console.log(this.textContent);
  });
}

Lad os sige, at vi vil afbinde denne funktion fra afsnittet efter et klik på afsnittet. Vi støder imidlertid på et problem: funktionen har ikke noget navn, hvilket betyder at vi ikke kan henvise til den ved navn for at afbinde den.

For at løse problemet skal vi give funktionen et navn, ved at lave den om til et navngivet funktionsudtryk. Lad os gøre dette:

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

for (let elem of elems) {
  elem.addEventListener('click', function func() { // gav funktionen et navn
    console.log(this.textContent);
  });
}

Nu kan denne funktion afbindes inde i den selv:

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

for (let elem of elems) {
  elem.addEventListener('click', function func() {
    console.log(this.textContent);
    this.removeEventListener('click', func); // afbinder funktionen
  });
}