Ontkoppelen van event handlers in een lus in JavaScript

Stel dat we nu niet één element hebben, maar meerdere. Bijvoorbeeld, meerdere alinea's:

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

Laten we aan elk van deze alinea's via een event handler voor klikken de functie func binden:

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

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

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

Laten we de code nu aanpassen zodat elke alinea alleen reageert op de eerste klik erop. Hiervoor zullen we bij het klikken op een alinea de gebonden handler ervan ontkoppelen. Hierbij zal het ontkoppelen specifiek voor deze alinea zijn, zonder de anderen te beïnvloeden.

Zoals je al weet, kan het element waarin de gebeurtenis plaatsvond, in de handler-functie worden verkregen via this. Dit betekent dat we het ontkoppelen van de handler van this moeten uitvoeren, zoals hier:

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

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

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // ontkoppel de handler
}

Er zijn alinea's gegeven. Voeg bij het klikken op een alinea een uitroepteken toe aan het einde ervan. Zorg ervoor dat deze toevoeging alleen bij de eerste klik plaatsvindt.