Adăugarea de manipulatoare în buclă în JavaScript

Să învățăm acum cum să adăugăm în masă manipulatoare de evenimente elementelor. Să presupunem, de exemplu, că avem paragrafe:

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

Să presupunem că avem și o funcție:

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

Să parcurgem paragrafele noastre în buclă și fiecărui paragraf să-i adăugăm ca manipulator de click funcția func:

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

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

Să mergem mai departe și să facem astfel încât la click pe orice paragraf să fie afișat textul acelui paragraf. Există, totuși, o problemă: paragrafe sunt multe, iar funcția-manipulator este una singură. Cum să distingem paragrafele noastre în interiorul funcției-manipulator?

În aceasta ne va ajuta obiectul this - la apelarea funcției în momentul evenimentului acest obiect va indica către acel element unde acest eveniment s-a produs. Să modificăm codul funcției noastre func în conformitate cu cele spuse:

javascriptfunction func() {
  console.log(this.textContent); // afișăm textul paragrafului
}

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