Odpinanie procedur obsługi zdarzeń w pętli w JavaScript

Załóżmy teraz, że mamy nie jeden element, a kilka. Na przykład, kilka akapitów:

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

Dodajmy do każdego z tych akapitów procedurę obsługi kliknięcia funkcją func:

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

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

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

Przeróbmy teraz kod tak, aby każdy akapit reagował tylko na pierwsze naciśnięcie na niego. W tym celu po kliknięciu na akapit odepniemy od niego dołączoną procedurę obsługi. Jednocześnie odpinanie będzie dotyczyło konkretnie tego akapitu, nie dotykając w żaden sposób pozostałych.

Jak już wiesz, element, w którym wydarzyło się zdarzenie, można uzyskać w funkcji-obserwatorze poprzez this. Oznacza to, że trzeba wykonać odpinanie procedury obsługi od this, w ten sposób:

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

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

function func() {
  console.log(this.textContent);
  this.removeEventListener('click', func); // odpinamy procedurę obsługi
}