Het ontkoppelen van anonieme functies in JavaScript

Stel dat er nu een anonieme functie aan onze alinea's is gekoppeld:

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

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

Stel dat we deze functie van de alinea wilten ontkoppelen nadat erop is geklikt. We worden echter geconfronteerd met een probleem: de functie heeft geen naam, wat betekent dat we er niet naar kunnen verwijzen via die naam om hem te ontkoppelen.

Om het probleem op te lossen, moeten we de functie een naam geven, door er een benoemde function expressie van te maken. Laten we dit doen:

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

for (let elem of elems) {
  elem.addEventListener('click', function func() { // gaf de functie een naam
    console.log(this.textContent);
  });
}

Nu kan deze functie binnenin zichzelf worden ontkoppeld:

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

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