Notikumu apstrādātāju atvienošana cilpā JavaScript

Tagad pieņemsim, ka mums ir nevis viens elements, bet vairāki. Piemēram, vairāki rindkopas:

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

Pievienosim katrai no šīm rindkopām ar klikšķa notikuma apstrādātāju funkciju func:

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

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

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

Tagad pārveidosim kodu tā, lai katra rindkopa reaģētu tikai uz pirmo uz to noklikšķināšanu. Lai to izdarītu, noklikšķinot uz rindkopas, mēs atvienosim no tās piesaistīto apstrādātāju. Šajā gadījumā atvienošana notiks konkrēti no šīs rindkopas, neietekmējot pārējās.

Kā jūs jau zināt, elementu, kurā noticis notikums, var iegūt apstrādātāja funkcijā caur this. Tas nozīmē, ka ir jāveic apstrādātāja atvienošana no this, šeit šādi:

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

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

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // atvienojam apstrādātāju
}

Dotas rindkopas. Noklikšķinot uz jebkuras rindkopas, pievienojiet tai beigās izsaukuma zīmi. Izdariet tā, lai šī pievienošana notiktu tikai pirmo reizi noklikšķinot.