JavaScript တွင် ကွင်းဆက်အတွင်း Event Handlers များ ထည့်သွင်းခြင်း

ယခု အစုလိုက် အပြုံလိုက် Element များသို့ Event Handlers များ ထည့်သွင်းနည်းကို သင်ကြပါစို့။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့တွင် အောက်ပါစာပိုဒ်များ ရှိသည်ဆိုပါစို့။

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

ကျွန်ုပ်တို့တွင် အောက်ပါ function တစ်ခုလည်း ရှိသည်ဆိုပါစို့။

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

ကျွန်ုပ်တို့၏ စာပိုဒ်များကို ကွင်းဆက်ဖြင့် လှည့်ပတ်ပြီး စာပိုဒ်တစ်ခုစီအား ကလစ်နှိပ်ခြင်း Event Handler အဖြစ် function func ကို ထည့်သွင်းကြပါစို့။

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

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

ကျွန်ုပ်တို့ ရှေ့ဆက်သွားပြီး မည်သည့်စာပိုဒ်ကို ကလစ်နှိပ်လိုက်သည်ဖြစ်စေ ထိုစာပိုဒ်၏ စာသားကို ပြသအောင် ပြုလုပ်ကြည့်ပါမည်။ သို့ရာတွင်၊ ပြဿနာတစ်ခုရှိသည်။ စာပိုဒ်များစွာ ရှိပြီး၊ function-Event Handler တစ်ခုတည်းသာ ရှိသည်။ Function-Event Handler အတွင်းတွင် ကျွန်ုပ်တို့၏ စာပိုဒ်များကို မည်သို့ခွဲခြားသိမြင်နိုင်မည်နည်း။

ဤတွင် this object သည် ကျွန်ုပ်တို့ကို ကူညီမည်ဖြစ်သည်။ Event ဖြစ်ပွားချိန်တွင် function ကို ခေါ်ယူသည့်အခါ၊ ဤ object သည် ထို Event ဖြစ်ပွားသော Element ကို ညွှန်ပြမည်ဖြစ်သည်။ ကျွန်ုပ်တို့၏ function func ၏ ကုဒ်ကို ဖော်ပြခဲ့သည့်အတိုင်း ပြန်လည်ပြင်ဆင်ကြပါစို့။

javascriptfunction func() {
  console.log(this.textContent); // စာပိုဒ်၏စာသားကို ပြသသည်
}

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