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;
}

ასევე მოცემულია ინფუთები. გახადეთ ისე, რომ ფოკუსის დაკარგვისას ჩვენს ნებისმიერ ინფუთში შესრულდეს ზემოთ მოცემული ფუნქცია.

მოცემულია პარაგრაფები რიცხვებით. გახადეთ ისე, რომ ნებისმიერ პარაგრაფზე დაწკაპუნებისას მასში არსებული რიცხვი აიყვანოს კვადრატში.