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:

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

Pieņemsim, ka mums ir arī funkcija:

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

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

javascriptlet 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:

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

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