on နည်းလမ်း

on နည်းလမ်းသည် element တစ်ခုသို့ event handler များထည့်သွင်းရန် ခွင့်ပြုပေးသည်။ Handler တစ်ခုကို ဖယ်ရှားလိုပါက off နည်းလမ်းကို အသုံးပြုနိုင်သည်။ event တစ်ခုသည် တစ်ကြိမ်သာ အလုပ်လုပ်ပြီး နောက် handler ကိုယ်တိုင် ဖယ်ရှားသွားစေလိုပါက one နည်းလမ်းကို အသုံးပြုပါ။ ကျွန်ုပ်တို့ handler ချိတ်ဆက်မည့် element များသည် on ကို ခေါ်သုံးသည့်အချိန်တွင် ရှိနေရပါမည်။

ဝါကျဖွဲ့စည်းပုံ

ဤနည်းဖြင့် ကျွန်ုပ်တို့သည် element တစ်ခုသို့ event handler များထည့်သွင်းသည်၊ ပထမသတ်မှတ်ချက်အဖြစ် စာကြောင်းတစ်ခုအနေဖြင့် event တစ်ခု သို့မဟုတ် ကြားခံအကွက်လပ်ဖြင့် ခွဲထားသော event များစွာကို ပေးပို့သည်၊ ဒုတိယ သတ်မှတ်ချက်အနေဖြင့် element အတွင်းရှိ မျိုးဆက်များကို စစ်ထုတ်ရန် ထပ်ဆောင်း selector တစ်ခုကို ပေးပို့သည်၊ တတိယမှာ ထပ်ဆောင်း အချက်အလက်များဖြစ်ပြီး၊ event ဖြစ်ပွားသည့်အခါ handler ထဲသို့ event.data ဂုဏ်သတ္တိအတွင်းသို့ ပေးပို့သည်။ ဒုတိယနှင့် တတိယ သတ်မှတ်ချက်များသည် မဖြစ်မနေပေးရန် မလိုအပ်ပါ။ စတုတ္ထအဖြစ် handler function ကို ပေးပို့သည်၊ ထိုနေရာတွင် event object နှင့် မဖြစ်မနေပေးရန် မလိုအပ်သော ထပ်ဆောင်း သတ်မှတ်ချက်များ ပေးပို့သည်။ Handler function အစား false ကို ပေးပို့ပါက၊ function သည် false ကိုသာ ပြန်ပေးမည်:

$(selector).on(events, [selector], [data], handler-function(event object, [additional parameters]));

on နည်းလမ်းကို ကွဲပြားစွာ အသုံးပြုနိုင်သည်၊ ထိုသို့ဆိုလျှင် ပထမ သတ်မှတ်ချက်အနေဖြင့် JavaScript object တစ်ခုကို ပေးပို့ရမည်၊ ထိုနေရာတွင် သော့များသည် event အမျိုးအစားဖြစ်ပြီး တန်ဖိုးများသည် event များအတွက် ခေါ်ယူသော handler function များဖြစ်သည်:

$(selector).on({'event type': handler}, [selector], [data]);

ကျွန်ုပ်တို့သည် ထပ်ဆောင်း selector ကို မပေးပို့ပါက၊ event သည် ကျွန်ုပ်တို့ handler ချိတ်ဆက်ထားသော element တွင် အလုပ်လုပ်သည်။ အခြားအခြေအနေများတွင် - ထို selector နှင့် ကိုက်ညီသော မျိုးဆက် element တွင် (delegated events) အလုပ်လုပ်သည်။ တူညီသော event handler တစ်ခုကို element တစ်ခုတွင် အကြိမ်ကြိမ် ချိတ်ဆက်နိုင်သည်။

ဥပမာ

alert ထဲတွင် ၊ #test ရှိ စာပိုဒ်စာသားကို ထိုအပေါ် ကလစ်နှိပ်လိုက်သည့်အခါ ပြသကြည့်ရအောင်၊ အခြားစာပိုဒ်များကို ကလစ်နှိပ်ခြင်းသည် ဘာမှ ဖြစ်မလာပါ:

<p>text1</p>
<p id="test">text2</p>
<p>text3</p>

$('#test').on('click', function() {
	alert( $(this).text() );
});

ဥပမာ

စာပိုဒ်တစ်ခုကို ကလစ်နှိပ်သည့်အခါ on နည်းလမ်းသို့ ကျွန်ုပ်တို့ ပေးပို့ထားသော အချက်အလက်များကို ထုတ်ပြကြည့်ရအောင်။ ကျွန်ုပ်တို့ဖန်တီးထားသော handler function testFunc ကို အသုံးပြုကြည့်မည်:

<p>click</p>

function testFunc(event) {
	alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

ဆက်လက်ကြည့်ရှုရန်

off နည်းလမ်း,
သည် element မှ event handler များကို ဖယ်ရှားရန် ခွင့်ပြုပေးသည်
one နည်းလမ်း,
သည် event တစ်ခုကို တစ်ကြိမ်သာ အလုပ်လုပ်စေပြီး နောက် handler ကို အလိုအလျောက် ဖယ်ရှားရန် ခွင့်ပြုပေးသည်
event object,
သည် event အကြောင်း အချက်အလက်များ ပါဝင်သည်
trigger နည်းလမ်း,
သည် element သို့ ချိတ်ဆက်ထားသော event handler အားလုံးကို သတ်မှတ်ထားသော အမျိုးအစားရှိ event များအတွက် စတင်အလုပ်လုပ်စေရန် ခွင့်ပြုပေးသည်
JavaScript နည်းလမ်း bind,
သည် function တစ်ခုသို့ context ချိတ်ဆက်ရန် ခွင့်ပြုပေးသည်