Desvinculando funções anônimas em JavaScript

Suponha que agora uma função anônima esteja vinculada aos nossos parágrafos:

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

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

Suponha que queiramos desvincular esta função do parágrafo após o clique neste parágrafo. No entanto, enfrentamos um problema: a função não tem nome, o que significa que não poderemos referenciá-la por um nome para desvinculá-la.

Para resolver o problema, precisamos dar um nome à função, transformando-a em uma expressão funcional nomeada. Vamos fazer isso:

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

for (let elem of elems) {
  elem.addEventListener('click', function func() { // demos um nome à função
    console.log(this.textContent);
  });
}

Agora esta função pode ser desvinculada dentro dela mesma:

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

for (let elem of elems) {
  elem.addEventListener('click', function func() {
    console.log(this.textContent);
    this.removeEventListener('click', func); // desvinculamos a função
  });
}