Îndepărtarea handlerelor de evenimente într-o buclă în JavaScript

Să presupunem că acum avem nu un singur element, ci mai multe. De exemplu, mai multe paragrafe:

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

Să atașăm fiecăruia dintre aceste paragrafe funcția func ca handler de click:

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

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

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

Acum să modificăm codul astfel încât fiecare paragraf să reacționeze doar la prima apăsare pe el. Pentru aceasta, la click pe paragraf vom îndepărta handler-ul atașat acestuia. În același timp, îndepărtarea se va face specific de la acest paragraf, fără a afecta celelalte.

După cum știți deja, elementul în care a avut loc evenimentul poate fi obținut în funcția-handler prin this. Aceasta înseamnă că este necesar să executăm îndepărtarea handler-ului de la this, astfel:

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

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

function func() {
  console.log(this.textContent);
  this.removeEventListener('click', func); // îndepărtăm handler-ul
}