Իրադարձությունների մշակիչների ավելացում ցիկլում 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 օբյեկտը - ֆունկցիան կանչելու պահին, երբ տեղի է ունենում իրադարձություն, այս օբյեկտը կցույց տա այն տարրին, որտեղ այդ իրադարձությունը տեղի է ունեցել: Եկեք փոխակերպենք մեր func ֆունկցիայի կոդը ըստ ասվածի.

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

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