Odłączanie anonimowych funkcji w JavaScript

Załóżmy teraz, że do naszych akapitów jest podpięta anonimowa funkcja:

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

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

Załóżmy, że chcemy odłączyć tę funkcję od akapitu po kliknięciu w ten akapit. Czeka nas jednak problem: funkcja nie ma nazwy, a więc nie będziemy mogli odwołać się do niej po tej nazwie, aby ją odłączyć.

Aby rozwiązać problem, należy nadać funkcji nazwę, zamieniając ją w wyrażenie funkcyjne nazwane. Zróbmy to:

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

for (let elem of elems) {
  elem.addEventListener('click', function func() { // nadaliśmy nazwę funkcji
    console.log(this.textContent);
  });
}

Teraz tę funkcję można odłączyć wewnątrz niej samej:

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

for (let elem of elems) {
  elem.addEventListener('click', function func() {
    console.log(this.textContent);
    this.removeEventListener('click', func); // odłączamy funkcję
  });
}