Desvinculando manipuladores de eventos em loop em JavaScript

Suponha que agora temos não um elemento, mas vários. Por exemplo, vários parágrafos:

html<p>text1</p>
<p>text2</p>
<p>text3</p>

Vamos vincular a função func a cada um desses parágrafos como um manipulador de clique:

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

for (let elem of elems) {
  elem.addEventListener('click', func);
}

function func() {
  console.log(this.textContent);
}

Agora, vamos modificar o código para que cada parágrafo reaja apenas ao primeiro clique nele. Para isso, ao clicar em um parágrafo, desvincularemos o manipulador associado a ele. Dessa forma, o desvinculamento será específico para esse parágrafo, sem afetar os demais.

Como você já sabe, o elemento no qual o evento ocorreu pode ser obtido na função manipuladora através de this. Isso significa que precisamos executar o desvinculamento do manipulador de this, assim:

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

for (let elem of elems) {
  elem.addEventListener('click', func);
}

function func() {
  console.log(this.textContent);
  this.removeEventListener('click', func); // desvinculamos o manipulador
}