JavaScriptda tsiklda ishlov beruvchilarni qo'shish

Keling, endi elementlarga hodisalar ishlov beruvchilarini ommaviy ravishda qo'shishni o'rganaylik. Misol tariqasida, bizda abzatslar bor:

<p>matn1</p>
<p>matn2</p>
<p>matn3</p>

Shuningdek, bizda funksiya bor:

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

Keling, abzatslarimizni tsiklda aylantiramiz va har bir abzatsga bosish hodisasi ishlovchisi sifatida func funksiyasini qo'shamiz:

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

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

Keling, yanada chuqurroq ko'rib chiqaylik va har qanday abzatsga bosilganda shu abzatsning matni chiqarilsin. Biroq, muammo bor: abzatslar ko'p, ammo ishlov beruvchi funksiya bitta. Ishlov beruvchi funksiya ichida abzatslarimizni qanday ajratib olamiz?

Bunda this obyekti bizga yordam beradi - hodisa paytida funksiya chaqirilganda, bu obyekt hodisa yuz bergan elementni ko'rsatadi. func funksiyamiz kodini yuqoridagilarga muvofiq o'zgartiramiz:

function func() {
	console.log(this.textContent); // abzats matnini chiqaramiz
}

Quyidagi funksiya berilgan:

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

Shuningdek, input maydonlari berilgan. Har qanday input maydonida fokus yo'qotilganda yuqorida keltirilgan funksiya bajarilishi uchun sozlang.

Raqamli abzatslar berilgan. Har qanday abzatsga bosilganda uning raqami kvadratga ko'tarilishi uchun sozlang.