Tapahtumankäsittelijöiden irrottaminen silmukassa JavaScriptissä

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

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

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

let 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:

let 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ä
}

Annettu kappaleita. Paina mitä tahansa kappaleista lisää sen loppuun huutomerkki. Tee niin, että tämä lisäys tapahtuu vain ensimmäisellä painalluksella.