Apdorojimo funkcijų pridėjimas cikle JavaScript

Dabar išmokime masiniu būdu pridėti įvykių apdorojimo funkcijas elementams. Tarkime, pavyzdžiui, turime pastraipas:

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

Tarkime, kad taip pat turime funkciją:

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

Peržiūrėkime mūsų pastraipas cikle ir kiekvienai pasraipai pridėkime kaip paspaudimo apdorojimo funkciją funkciją func:

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

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

Eikime toliau ir padarykime taip, kad paspaudus bet kurią pastraipą būtų išvestas tos pastraipos tekstas. Tačiau yra problema: pastraipų yra daug, o apdorojimo funkcija yra viena. Kaip mums atskirti mūsų pastraipas apdorojimo funkcijos viduje?

Tai mums padės objektas this - kai funkcija iškviečiama įvykio metu, šis objektas rodys į tą elementą, kuriame šis įvykis atsitiko. Performuokime mūsų funkcijos func kodą remdamiesi tuo, kas buvo pasakyta:

javascriptfunction func() {
  console.log(this.textContent); // išvedame pastraipos tekstą
}

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