Rimozione dei gestori di eventi in un ciclo in JavaScript

Supponiamo ora di avere non un elemento, ma diversi. Ad esempio, diversi paragrafi:

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

Aggiungiamo a ciascuno di questi paragrafi la funzione func come gestore del click:

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

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

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

Modifichiamo ora il codice in modo che ogni paragrafo reagisca solo al primo click su di esso. Per fare ciò, quando si clicca su un paragrafo rimuoveremo da esso il gestore associato. In questo caso, la rimozione sarà specifica per questo paragrafo, senza influenzare gli altri.

Come già sapete, l'elemento in cui è avvenuto l'evento può essere ottenuto nella funzione gestore tramite this. Ciò significa che è necessario eseguire la rimozione del gestore da this, in questo modo:

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

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

function func() {
  console.log(this.textContent);
  this.removeEventListener('click', func); // rimuoviamo il gestore
}