Tapahtumankäsittelijöiden irrottaminen silmukassa JavaScriptissä

Oletetaan nyt, että meillä ei ole vain yksi elementti, vaan useita. Esimerkiksi useita kappaleita:

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

Liitetään kuhunkin näistä kappaleista napsautuksen käsittelijäfunktiolla funktio func:

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

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

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

Muutetaan nyt koodia niin, että jokainen kappale reagoi vain ensimmäiseen painallukseen. Tätä varten irrotamme kappaleesta kiinnitetyn käsittelijän napsautettaessa. Tällöin irrottaminen koskee tarkalleen tätä kappaletta, eikä vaikuta muihin.

Kuten jo tiedät, elementin, jossa tapahtuma tapahtui, voi saada käsittelijäfunktiossa läpi this:n. Tämä tarkoittaa, että käsittelijän irrottaminen tulee suorittaa this:stä, näin:

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

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

function func() {
  console.log(this.textContent);
  this.removeEventListener('click', func); // irrotetaan käsittelijä
}