JavaScript ရှိ အမည်ပေး event handler များ

ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် event handler များအဖြစ် အမည်မသိ လုပ်ဆောင်ချက်များ (anonymous functions) ကို အသုံးပြုခဲ့ကြသည်။ တကယ်တော့ မလိုအပ်ပါ - လုပ်ဆောင်ချက်သည် သာမန်၊ အမည်ရှိသည်လည်း ဖြစ်နိုင်သည်။ ဥပမာအနေဖြင့် ကျွန်ုပ်တို့တွင် ထိုကဲ့သို့သော လုပ်ဆောင်ချက်တစ်ခု ရှိသည်ဆိုပါစို့။

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

ခလုတ်တစ်ခုလည်း ရှိသည်ဆိုပါစို့။

<input id="button" type="submit">

ခလုတ်ကို နှိပ်လိုက်သည့်အခါ ကျွန်ုပ်တို့၏ func လုပ်ဆောင်ချက် အလုပ်လုပ်အောင် လုပ်ကြည့်ရအောင်။ ထိုသို့လုပ်ရန် addEventListener ၏ parameter အဖြစ် ကျွန်ုပ်တို့၏ လုပ်ဆောင်ချက် အမည်ကို ဤကဲ့သို့ ပေးပို့မည်။

let button = document.querySelector('#button');
button.addEventListener('click', func);

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

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

<input id="button1" type="submit" value="button1">
<input id="button2" type="submit" value="button2">

အောက်ပါ လုပ်ဆောင်ချက်များကို ပေးထားသည်။

function func1() {
	console.log(1);
}

function func2() {
	console.log(2);
}

ပထမခလုတ်ကို နှိပ်လိုက်သည့်အခါ func1 လုပ်ဆောင်ချက် အလုပ်လုပ်ပြီး ဒုတိယခလုတ်ကို နှိပ်လိုက်သည့်အခါ - func2 လုပ်ဆောင်ချက် အလုပ်လုပ်စေရန် လုပ်ပါ။