Իրադարձությունների մշակիչների ավելացում ցիկլում JavaScript-ում

Այժմ եկեք սովորենք զանգվածային կերպով ավելացնել տարրերի իրադարձությունների մշակիչներ: Ենթադրենք, օրինակ, մենք ունենք պարբերություններ.

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

Ենթադրենք նաև, որ մենք ունենք ֆունկցիա.

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

Եկեք ցիկլով անցնենք մեր պարբերությունների վրայով և յուրաքանչյուր պարբերության ավելացնենք որպես կլիկի մշակիչ func ֆունկցիան.

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

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

Եկեք ավելի առաջ անցնենք և անենք այնպես, որ ցանկացած պարբերության վրա կլիկ անելու դեպքում արտածվի այդ պարբերության տեքստը: Սակայն կա մի խնդիր. պարբերությունները շատ են, իսկ ֆունկցիա-մշակիչը մեկ է: Ինչպե՞ս տարբերակենք մեր պարբերությունները ֆունկցիա-մշակիչի ներսում:

Սրանում մեզ կօգնի this օբյեկտը - ֆունկցիան կանչելու պահին, երբ տեղի է ունենում իրադարձություն, այս օբյեկտը կցույց տա այն տարրին, որտեղ այդ իրադարձությունը տեղի է ունեցել: Եկեք փոխակերպենք մեր func ֆունկցիայի կոդը ըստ ասվածի.

function func() {
	console.log(this.textContent); // արտածում ենք պարբերության տեքստը
}

Տրված է հետևյալ ֆունկցիան.

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

Տրված են նաև input-ներ: Ապահովեք, որ կենտրոնացումը կորցնելու դեպքում մեր input-ներից որևէ մեկում կատարվի վերը նշված ֆունկցիան:

Տրված են թվերով պարբերություններ: Ապահովեք, որ ցանկացած պարբերության վրա կլիկ անելու դեպքում նրա թիվը բարձրացվի քառակուսի: