Eseménykezelők leválasztása ciklusban JavaScriptben

Tegyük fel, hogy most nem egy elemünk van, hanem több. Például több bekezdés:

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

Adjunk mindegyik bekezdéshez egy func függvényt kattintás eseménykezelőként:

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

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

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

Most módosítsuk úgy a kódot, hogy minden bekezdés csak az első rá kattintáskor reagáljon. Ehhez a bekezdésre kattintáskor leválasztjuk az ahhoz kapcsolt eseménykezelőt. Ezzel a leválasztással csak az adott bekezdést érintjük, a többit nem.

Ahogy már tudod, az elem, amelyben az esemény bekövetkezett, megkapható a függvény-kezelőben a this segítségével. Ez azt jelenti, hogy a kezelőt a this-ről kell leválasztani, így:

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

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

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // leválasztjuk a kezelőt
}

Adottak bekezdések. Bármelyik bekezdésre kattintáskor adjon hozzá a végéhez egy felkiáltójelet. Úgy kell ezt megvalósítani, hogy ez a hozzáadás csak az első kattintáskor történjen meg.