Apdorojimo funkcijų pridėjimas cikle JavaScript

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

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

Tarkime, kad taip pat turime funkciją:

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

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

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

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

Duota ši funkcija:

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

Taip pat duoti įvesties laukai. Padarykite taip, kad praradus fokusą bet kuriame iš mūsų įvesties laukų, būtų vykdyta aukščiau pateikta funkcija.

Duotos pastraipos su skaičiais. Padarykite taip, kad paspaudus bet kurią pastraipą, jos skaičius būtų pakeltas kvadratu.