Odvezivanje rukovaoca događaja u petlji u JavaScript-u

Pretpostavimo sada da nemamo jedan element, već nekoliko njih. Na primer, nekoliko paragrafa:

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

Hajde da svakom od ovih paragrafa rukovaocem klika vežemo funkciju func:

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

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

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

Sada hajde da modifikujemo kod tako da svaki paragraf reaguje samo na prvi klik na njega. Da bismo to postigli, prilikom klika na paragraf ćemo odvezati rukovaoca koji je na njega vezan. Pritom će se odvajanje odnositi samo na ovaj paragraf, ne utičući na ostale.

Kao što već znate, element u kojem se dogodio događaj možemo dobiti u funkciji-rukovaocu preko this. To znači da treba izvršiti odvajanje rukovaoca od this, ovako:

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

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

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // odvezujemo rukovaoca
}

Dat je paragraf. Klikom na bilo koji od paragrafa dodajte mu na kraj uzvičnik. Postavite to tako da se ovo dodavanje događa samo prilikom prvog klika.