Détacher les fonctions anonymes en JavaScript

Supposons maintenant qu'une fonction anonyme soit attachée à nos paragraphes :

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

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

Supposons que nous voulions détacher cette fonction du paragraphe après un clic sur ce paragraphe. Cependant, nous rencontrons un problème : la fonction n'a pas de nom, ce qui signifie que nous ne pourrons pas y faire référence par ce nom pour la détacher.

Pour résoudre le problème, nous devons donner un nom à la fonction, en la transformant en expression fonctionnelle nommée. Faisons cela :

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

for (let elem of elems) {
  elem.addEventListener('click', function func() { // a donné un nom à la fonction
    console.log(this.textContent);
  });
}

Maintenant, cette fonction peut être détachée à l'intérieur d'elle-même :

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

for (let elem of elems) {
  elem.addEventListener('click', function func() {
    console.log(this.textContent);
    this.removeEventListener('click', func); // détache la fonction
  });
}