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:

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

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

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

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

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

Este dată următoarea funcție:

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

De asemenea, sunt date input-uri. Faceți astfel încât la pierderea focusului în oricare dintre input-urile noastre să se execute funcția prezentată mai sus.

Sunt date paragrafe cu numere. Faceți astfel încât la click pe orice paragraf numărul din el să fie ridicat la pătrat.