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

Tagad iemācīsimies masveidā pievienot notikumu apstrādātājus elementiem. Pieņemsim, piemēram, ka mums ir rindkopas:

<p>teksts1</p>
<p>teksts2</p>
<p>teksts3</p>

Pieņemsim, ka mums ir arī funkcija:

function func() {
	console.log('!');
}

Pārlūkosim mūsu rindkopas cilpā un katrai rindkopai pievienosim kā klikšķa notikuma apstrādātāju funkciju func:

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

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

Iesim tālāk un padarīsim tā, lai uzklikšķinot uz jebkuras rindkopas tiktu izvadīts tās rindkopas teksts. Tomēr ir problēma: rindkopas ir daudz, bet notikumu apstrādātāja funkcija ir viena. Kā mums atšķirt mūsu rindkopas funkcijas-apstrādātāja iekšienē?

To mums palīdzēs objekts this - izsaucot funkciju notikuma brīdī, šis objekts būs vērsts uz to elementu, kurā šis notikums notika. Pārveidosim mūsu funkcijas func kodu saskaņā ar teikto:

function func() {
	console.log(this.textContent); // izvadam rindkopas tekstu
}

Dota šāda funkcija:

function func() {
	this.value = Number(this.value) + 1;
}

Doti arī ievades lauki. Padariet tā, lai zaudējot fokusu jebkurā no mūsu ievades laukiem, tiktu izpildīta iepriekš minētā funkcija.

Dotas rindkopas ar skaitļiem. Padariet tā, lai uzklikšķinot uz jebkuras rindkopas, skaitlis tajā tiktu pacelts kvadrātā.