Desvinculación de manejadores de eventos en un bucle en JavaScript

Supongamos que ahora no tenemos un solo elemento, sino varios. Por ejemplo, varios párrafos:

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

Vamos a asignar a cada uno de estos párrafos la función func como manejador de clics:

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

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

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

Ahora modifiquemos el código para que cada párrafo solo reaccione al primer clic sobre él. Para ello, al hacer clic en un párrafo desvincularemos el manejador asignado. Esta desvinculación será específica de este párrafo, sin afectar a los demás.

Como ya sabes, el elemento en el que ocurrió el evento se puede obtener en la función manejadora a través de this. Esto significa que es necesario realizar la desvinculación del manejador de this, así:

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 el manejador
}