Odpinanie procedur obsługi zdarzeń w pętli w JavaScript

Załóżmy teraz, że mamy nie jeden element, a kilka. Na przykład, kilka akapitów:

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

Dodajmy do każdego z tych akapitów procedurę obsługi kliknięcia funkcją func:

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

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

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

Przeróbmy teraz kod tak, aby każdy akapit reagował tylko na pierwsze naciśnięcie na niego. W tym celu po kliknięciu na akapit odepniemy od niego dołączoną procedurę obsługi. Jednocześnie odpinanie będzie dotyczyło konkretnie tego akapitu, nie dotykając w żaden sposób pozostałych.

Jak już wiesz, element, w którym wydarzyło się zdarzenie, można uzyskać w funkcji-obserwatorze poprzez this. Oznacza to, że trzeba wykonać odpinanie procedury obsługi od this, w ten sposób:

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

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

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // odpinamy procedurę obsługi
}

Dane są akapity. Po naciśnięciu na dowolny z akapitów dodaj mu na końcu wykrzyknik. Spraw, aby to dodawanie odbywało się tylko po pierwszym naciśnięciu.