Event-Handler-Entkopplung in Schleifen in JavaScript

Nehmen wir nun an, wir haben nicht ein Element, sondern mehrere. Zum Beispiel mehrere Absätze:

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

Fügen wir jedem dieser Absätze mit einem Klick-Handler die Funktion func hinzu:

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

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

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

Lassen Sie uns den Code nun so umgestalten, dass jeder Absatz nur auf den ersten Druck reagiert drauf. Dazu werden wir beim Klicken auf einen Absatz den zugehörigen Handler davon entkoppeln. Dabei erfolgt die Entkopplung konkret für diesen Absatz, ohne die anderen in irgendeiner Weise zu beeinträchtigen.

Wie Sie bereits wissen, kann das Element, in dem das Ereignis auftrat, in der Handler-Funktion über this abgerufen werden. Das bedeutet, dass die Entkopplung des Handlers von this erfolgen muss, so wie 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); // Handler entkoppeln
}

Es sind Absätze gegeben. Fügen Sie bei einem Klick auf einen beliebigen Absatz ein Ausrufezeichen an dessen Ende hinzu. Sorgen Sie dafür, dass diese Hinzufügung nur beim ersten Klick erfolgt.