JavaScript-да циклда ишловчиларни қўшиш

Ҳозир элементларга оммавий равишда воқелар ишловчиларини қўшишни ўрганамиз. Масалан, айтайлик, бизда бу абзацлар бор:

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

Айтайлик, бизда шу функция ҳам бор:

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

Келгина, бизнинг абзацларимизни циклда айлантириб, ҳар бир абзацга сичқонча босилганда ишлайдиган ишловчи сифатида func функциясини қўшамиз:

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

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

Келгина, яна бориб, ҳар қандай абзацга сичқонча босилганда ўша абзацнинг матни чиқарилишини таъминлаймиз. Аммо, муаммо бор: абзацлар кўп, аммо функция-ишловчи битта. Функция-ишловчи ичида бизнинг абзацларимизни қандай ажратиб оламиз?

 Бунга бизга this объекти ёрдам беради - воқе sodir boʻlganda функция чақирилганда, бу объект ўша воқе sodir boʻlgan элементни кўрсатади. Келтирилган гапга мувофиқ бизнинг func функциямиз кодини қайта ишлаймиз:

javascriptfunction func() {
  console.log(this.textContent); // абзацнинг матнини чиқарамиз
}

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