JavaScriptda tsiklda ishlov beruvchilarni qo'shish

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

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

Shuningdek, bizda funksiya bor:

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

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

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

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

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