event အရာဝတ္ထု

event အရာဝတ္ထုကို ဖြစ်ရပ်တစ်ခုဖြစ်ပေါ်သည့်အခါ ထုတ်လုပ်ပြီး ၎င်းအကြောင်း အချက်အလက်များပါဝင်သည်။ ဖြစ်ရပ် ပေါ်ပေါက်လာသည့်အခါ event အရာဝတ္ထုကို လက်ခံကြိမ်လုံး လုပ်ဆောင်ချက် (function) သို့ လွှဲပြောင်းပေးသည်။

event အရာဝတ္ထု၏ ဂုဏ်သတ္တိများနှင့် method များ

အောက်ပါဇယားတွင် event အရာဝတ္ထု၏ ဂုဏ်သတ္တိများနှင့် method များနှင့် ၎င်းတို့၏ ဖော်ပြချက်ကို ဖော်ပြထားသည်:

အမည်	ဖော်ပြချက်
`event.currentTarget`	ဖြစ်ရပ် ပေါ်လာခြင်း (bubbling) အဆင့်တွင် လက်ရှိ DOM element. ပုံမှန်အားဖြင့် ဤဂုဏ်သတ္တုသည် function အတွင်း `this` နှင့် ညီမျှသည်။
`event.data`	မဖြစ်မနေလိုအပ်သော parameter မဟုတ်ပါ။ တက်ကြွသော လက်ခံကြိမ်လုံး (handler) ကို ဖြစ်ရပ်နည်းလမ်းထဲသို့ တွဲချိတ်သည့်အခါ ပေးပို့သော အချက်အလက်အရာဝတ္ထု။
`event.delegateTarget`	ယခုအခေါ်ခံရသော jQuery ဖြစ်ရပ်လက်ခံကြိမ်လုံးကို ချိတ်ဆက်ထားသော element. ဤဂုဏ်သတ္တုသည် ကိုယ်စားပြုဖြစ်ရပ်များ (delegated events) တွင် အထူးအသုံးဝင်သည်။ ထိုသို့ဖြစ်ရပ်လက်ခံကြိမ်လုံးကို ကိုင်တွယ်ရမည့် element ၏ ရှေ့ဆောင်လမ်းပြဖြစ်သူ (ancestor) နှင့် ချိတ်ဆက်ထားခြင်းဖြစ်သည်။ ကိုယ်စားမပြုသော လက်ခံကြိမ်လုံးများအတွက်၊ element တစ်ခုတည်းနှင့် တိုက်ရိုက်ချိတ်ဆက်ထားပါက `event.delegateTarget` ၏ တန်ဖိုးသည် `event.currentTarget` ၏ တန်ဖိုးနှင့် ကိုက်ညီသည်။
`event.isDefaultPrevented`	Method သည် ဤဖြစ်ရပ်အရာဝတ္ထုအတွက် `event.preventDefault` method ခေါ်ယူခဲ့သလားဟု စစ်ဆေးသည်။
`event.isImmediatePropagationStopped`	Method သည် ဤဖြစ်ရပ်အရာဝတ္ထုအတွက် `event.stopImmediatePropagation` method ခေါ်ယူခဲ့သလားဟု စစ်ဆေးသည်။
`event.isPropagationStopped`	Method သည် ဤဖြစ်ရပ်အရာဝတ္ထုအတွက် `event.stopPropagation` method ခေါ်ယူခဲ့သလားဟု စစ်ဆေးသည်။
`event.isPropagationStopped`	Method သည် ဤဖြစ်ရပ်အရာဝတ္ထုအတွက် `event.stopPropagation` method ခေါ်ယူခဲ့သလားဟု စစ်ဆေးသည်။
`event.metaKey`	Method သည် ဖြစ်ရပ်ဖြစ်ပေါ်သည့်အချိန်တွင် `META` ကီးကို နှိပ်ထားသလားဟု စစ်ဆေးသည်။ ပလက်ဖောင်းပေါ်မူတည်၍ ကီးသည် ကွဲပြားနိုင်သည်။ `true` သို့မဟုတ် `false` ကို ပြန်ပေးသည်။
`event.namespace`	ဖြစ်ရပ်ခေါ်ယူသည့်အချိန်တွင် သတ်မှတ်ထားသော namespace. ဤဂုဏ်သတ္တုသည် ပလပ်အင်ရေးသူများအတွက် အသုံးဝင်ပါလိမ့်မည်။ ၎င်းတို့၏ လုပ်ဆောင်ချက်များသည် အသုံးပြုသော namespace အပေါ်မူတည်နေသည်။
`event.pageX`	မှတ်တမ်း (document) ၏ ဘယ်ဘက်အစွန်းနှင့် နှိုင်းယှဉ်၍ မောက်စ်၏ တည်နေရာကို ပြသသည်။
`event.pageY`	မှတ်တမ်း (document) ၏ အပေါ်အစွန်းနှင့် နှိုင်းယှဉ်၍ မောက်စ်၏ တည်နေရာကို ပြသသည်။
`event.preventDefault`	ဤ method ကို ခေါ်ယူပါက၊ ဤဖြစ်ရပ်အတွက် ပုံသေအလိုအလျောက်လုပ်ဆောင်ချက်ကို ဆောင်ရွက်မည်မဟုတ်ပါ။ ဥပမာအားဖြင့် လင့်ခ်တစ်ခုကို နှိပ်ခြင်းသည် URL အသစ်သို့ ပြောင်းရွှေ့ခြင်းကို မဖြစ်စေပါ။ ဤ method ကို ခေါ်ယူခဲ့သလားဟု စစ်ဆေးရန် `event.isDefaultPrevented` method ကို အသုံးပြုနိုင်သည်။
`event.relatedTarget`	ဖြစ်ရပ်တွင် ပါဝင်နေသော အခြား DOM element ရှိပါက ပြန်ပေးသည်။ `mouseout` အတွက် မောက်စ်က မည်သည့် element ပေါ်တွင် နေရာချထားကြောင်း ပြသသည်၊ `mouseover` အတွက် မောက်စ်ကာဆာ မည်သည့် element မှ ရုပ်သိမ်းသွားကြောင်း ပြသသည်။
`event.result`	ဖြစ်ပေါ်လာသော ဖြစ်ရပ်လက်ခံကြိမ်လုံးမှ ပြန်ပေးသော နောက်ဆုံးတန်ဖိုး၊ ၎င်းသည် `undefined` နှင့် မညီပါ။ ဤဂုဏ်သတ္တုသည် ကိုယ်ပိုင်ဖြစ်ရပ်များမှ တန်ဖိုးများရယူရန်အတွက် အသုံးဝင်နိုင်သည်။
`event.stopImmediatePropagation`	Element နှင့်ဆက်နွယ်နေသော ကျန်ရှိသော ဖြစ်ရပ်လက်ခံကြိမ်လုံးများ၏ လုပ်ဆောင်ချက်ကို ပယ်ဖျက်ပြီး DOM သစ်ပင်အထက် ဖြစ်ရပ်ပေါ်လာခြင်း (bubbling) ကို တားဆီးသည်။ ဖြစ်ရပ်ကို ရှေ့ဆောင်လမ်းပြဖြစ်သူ (ancestors) အထိ ပေါ်လာခြင်းမှ တားဆီးလိုသော်လည်း အခြားဖြစ်ရပ်လက်ခံကြိမ်လုံးများ၏ လုပ်ဆောင်ချက်ကို ခွင့်ပြုလိုပါက `event.stopPropagation` method ကို အသုံးပြုနိုင်သည်။ ဤဖြစ်ရပ်အရာဝတ္ထုအတွက် `event.stopImmediatePropagation` ခေါ်ယူခဲ့သလားဟု စစ်ဆေးရန် `event.isImmediatePropagationStopped` method ကို အသုံးပြုပါ။
`event.stopPropagation`	DOM သစ်ပင်အထက် ဖြစ်ရပ်ပေါ်လာခြင်း (bubbling) ကို တားဆီးသည်။ အခြားလက်ခံကြိမ်လုံးများသည် ဤ element အတွက် ဆက်လက်အလုပ်လုပ်နေမည်ကို သတိရပါ။ ဤ method သည် `trigger` method အသုံးပြု၍ ခေါ်ယူသော ကိုယ်ပိုင်ဖြစ်ရပ်များအတွက် အလုပ်လုပ်သည်။ ဤ method ကို ခေါ်ယူခဲ့သလားဟု စစ်ဆေးရန် `event.isPropagationStopped` ကို အသုံးပြုပါ။
`event.target`	ဖြစ်ရပ်ကို စတင်ခဲ့သော DOM element. ၎င်းသည် ဖြစ်ရပ်အတွက် မှတ်ပုံတင်ထားသော element သို့မဟုတ် ၎င်း၏ ဆက်ခံသူ (descendant) ဖြစ်နိုင်သည်။ `event.target` နှင့် `this` ကို နှိုင်းယှဉ်ခြင်းသည် ဖြစ်ရပ်ပေါ်လာခြင်း (bubbling) ကို သတ်မှတ်ရန်အတွက် အလွန်အသုံးဝင်သည်။ ဤဂုဏ်သတ္တုသည် ဖြစ်ရပ်ကိုယ်စားပြုခြင်း (delegation) လုပ်သည့်အခါ အသုံးဝင်သည်၊ ထိုအခါ ဖြစ်ရပ်များသည် ပေါ်လာကြသည်။
`event.timeStamp`	ဖြစ်ရပ်ကို ဘရောက်ဆာက ဖန်တီးသည့်အချိန်နှင့် ၁ ဇန်နဝါရီ ၁၉၇၀ ခုနှစ် အကြား မီလီစက္ကန့်ဖြင့် ကာလခြားကွာခြားချက်။ ဤဂုဏ်သတ္တုသည် ကုဒ်အတွင်း အချိန်နှစ်ခု၏ တန်ဖိုးများအတွက် `event.timeStamp` တန်ဖိုးများ၏ ကွာခြားချက်ရယူခြင်းဖြင့် ဖြစ်ရပ်၏ စွမ်းဆောင်ရည်ကို သတ်မှတ်ရန်အတွက် အသုံးဝင်နိုင်သည်။ ဖြစ်ရပ်လက်ခံကြိမ်လုံးအတွင်း လက်ရှိအချိန်ကို ရယူလိုပါက `getTime` method ကို အသုံးပြုပါ။
`event.type`	ဤဂုဏ်သတ္တုတွင် ဖြစ်ရပ်အမျိုးအစားကို ဖော်ပြထားသည်။
`event.which`	ဤဂုဏ်သတ္တုသည် ကီးဘုတ် သို့မဟုတ် မောက်စ်၏ မည်သည့်ကီးကို နှိပ်ထားကြောင်း ဖော်ပြသည်။ မောက်စ်အတွက်: `1` - ဘယ်ဘက်ခလုတ်၊ `2` - ဘီးလုံး (wheel)၊ `3` - ညာဘက်ခလုတ်။ `event.button` အစား `event.which` ကို အသုံးပြုပါ။

event အရာဝတ္ထု၏ အခြားဂုဏ်သတ္တိများ

event အရာဝတ္ထုထဲသို့ ကူးယူထားသော အခြားဂုဏ်သတ္တိများလည်း ရှိပါသည်:

altKey, button, buttons, cancelable, char, charCode, clientX, clientY, ctrlKey, detail, eventPhase, key, keyCode, offsetX, offsetY, originalTarget, screenX, screenY, shiftKey, toElement, view.

အထက်တွင် မဖော်ပြထားသော ဂုဏ်သတ္တိများကို ရယူရန် event.originalEvent အရာဝတ္ထုကို အသုံးပြုနိုင်သည်။

နမူနာ

div ထဲတွင် မည်သည့်ကီးများ နှိပ်ထားကြောင်း ထုတ်ပြကြပါစို့:

<input id="test" value="တစ်ခုခု ရိုက်ထည့်ပါ">
<div id="text"></div>

$('#test').on('keydown', function(event) {
	$('#text').html(event.type + ": " +  event.which);
});

နမူနာ

div ထဲတွင် ကျွန်ုပ်တို့ မည်သည့် tag ကို ကလစ်နှိပ်မည်ကို ထုတ်ပြကြပါစို့:

<body>
	<div id="text"></div>
	<div>
		<p>
			<strong><span>click</span></strong>
		</p>
	</div>
</body>

span, strong, p {
	display: block;
	padding: 10px;
	border: 1px solid black;
}

$('body').click(function(event) {
	$('#text').html('clicked: ' + event.target.nodeName);
});

ဤသည်ကိုလည်း ကြည့်ပါ

on method,
သည် element သို့ ဖြစ်ရပ်လက်ခံကြိမ်လုံးကို တွဲချိတ်ခွင့်ပြုသည်
trigger method,
သည် element နှင့် ချိတ်ဆက်ထားသော ဖြစ်ရပ်လက်ခံကြိမ်လုံးများအားလုံးကို သတ်မှတ်ထားသောအမျိုးအစားအတွက် ဖြစ်ရပ်များကို စတင်ခွင့်ပြုသည်
triggerHandler method,
သည် element နှင့် ချိတ်ဆက်ထားသော ဖြစ်ရပ်လက်ခံကြိမ်လုံးများအားလုံးကို စတင်ခွင့်ပြုသည်
jQuery ဖြစ်ရပ်များ