Entkoppeln anonymer Funktionen in JavaScript

Nehmen wir an, an unsere Absätze ist nun eine anonyme Funktion gebunden:

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

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

Nehmen wir an, wir möchten diese Funktion vom Absatz nach einem Klick auf diesen Absatz entkoppeln. Uns erwartet jedoch ein Problem: Die Funktion hat keinen Namen, was bedeutet, dass wir nicht über diesen Namen auf sie zugreifen können, um sie zu entkoppeln.

Um das Problem zu lösen, müssen wir der Funktion einen Namen geben, indem wir sie in einen benannten Funktionsausdruck umwandeln. Tun wir dies:

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

for (let elem of elems) {
  elem.addEventListener('click', function func() { // gab der Funktion einen Namen
    console.log(this.textContent);
  });
}

Nun kann diese Funktion innerhalb von sich selbst entkoppelt werden:

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

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