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

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

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

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

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

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

let 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 ၏ ကုဒ်ကို ဖော်ပြခဲ့သည့်အတိုင်း ပြန်လည်ပြင်ဆင်ကြပါစို့။

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

အောက်ပါ function ကို ပေးထားသည်။

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

Input များကိုလည်း ပေးထားသည်။ ကျွန်ုပ်တို့၏ Input များထဲမှ မည်သည့်တစ်ခုတွင်မဆို focus ပျောက်သွားသည့်အခါ အထက်ဖော်ပြပါ function ကို လုပ်ဆောင်အောင်ပြုလုပ်ပါ။

နံပါတ်များပါသော စာပိုဒ်များကို ပေးထားသည်။ မည်သည့်စာပိုဒ်ကို ကလစ်နှိပ်လိုက်သည်ဖြစ်စေ ၎င်းအတွင်းရှိ နံပါတ်ကို စတုရန်းကိန်း ဖြစ်အောင်ပြုလုပ်ပါ။