addEventListener နည်းလမ်း

addEventListener နည်းလမ်းသည် element တစ်ခုပေါ်သို့ event များ၏ ကိုင်တွယ်ဖြေရှင်းသူများကို သတ်မှတ်ပေးနိုင်ပါသည်။ ၎င်းကို အသုံးပြု၍ ဥပမာအားဖြင့် button တစ်ခုကို နှိပ်လိုက်သည့်အခါ (သို့မဟုတ်) text field တစ်ခုတွင် စာရိုက်လိုက်သည့်အခါ မည်သည့်အရာလုပ်ဆောင်ရမည်ကို သတ်မှတ်ပေးနိုင်ပါသည်။ ပထမပိုင်း parameter တွင် ပေးပို့သော event ၏ အမျိုးအစားကို သတ်မှတ်ပြီး၊ ဒုတိယပိုင်း parameter တွင် ပထမပိုင်း parameter တွင် သတ်မှတ်ထားသော event ဖြစ်ပွားပြီးနောက် အလုပ်လုပ်မည့် function တစ်ခုကို သတ်မှတ်ပါသည်။ တတိယမြောက် optional parameter တွင် object ၏ ဂုဏ်သတ္တိများ (once, capture, passive) ကို (သို့မဟုတ်) useCapture parameter ကို ပေးပို့ပါသည်။

Syntax

element.addEventListener('event type', function, [object characteristics]);
သို့မဟုတ်
element.addEventListener('event type', function, [useCapture]);

ဥပမာ

Button တစ်ခုကို နှိပ်လိုက်သည့်အခါ message ထွက်လာစေရန် ပြုလုပ်ကြည့်ပါစို့။

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('message');
});

ဥပမာ

Input တစ်ခုတွင် focus ပျောက်သွားသည့်အခါ ၎င်း input ၏ text ဖြင့် message ထွက်လာစေမည့် code ကို ရေးကြည့်ပါစို့။

<input id="input" value="text">

let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	alert(this.value);
});

ဥပမာ

Button တစ်ခုကို နှိပ်လိုက်သည့်အခါ message ကို console တွင် တစ်ကြိမ်သာ ထုတ်ပြစေလိုပါသည်။ ၎င်းအတွက် ဒုတိယ parameter ကို အသုံးပြုပါမည်။

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function() {
		console.log('message');
	},
	{
		once: true
	}
);

ဥပမာ

passive parameter သည် event ကို ကိုင်တွယ်ဖြေရှင်းစဉ် event.preventDefault နည်းလမ်းကို ခေါ်ယူခြင်းကို တားမြစ်ပေးပါသည်။ ယခင်ဥပမာသို့ event.preventDefault နည်းလမ်းကို အသုံးပြုကြည့်ပြီး၊ passive parameter တွင် true တန်ဖိုးကို သတ်မှတ်ကြည့်ပါစို့။

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('No message');
	},
	{
		passive: true
	}
);

Code ကို အလုပ်လုပ်စေပြီးနောက် အောက်ပါ message များကို မြင်တွေ့ရပါမည်။

'No message';
'Unable to preventDefault inside passive event listener invocation.'

ဥပမာ

useCapture parameter အား true တန်ဖိုးသတ်မှတ်ပေးပါက event များ အတွင်းမှ အပြင်သို့ ပြန့်ထွက်သည့် အခြေအနေကို ပြသပေးပါသည်။ false တန်ဖိုးသတ်မှတ်ပေးပါက အပြင်မှ အတွင်းသို့ ပြန်ဝင်သည့် အခြေအနေကို ပြသပေးပါသည်။ useCapture parameter ကို ပေးပို့သည့်အခါ ၎င်း၏ အမည်ကို ချန်လှပ်ထားပြီး ရိုးရှင်းစွာ true (သို့မဟုတ်) false ဟု ရေးသားပါသည်။ ၎င်းတို့ကို နှိပ်လိုက်သည့်အခါ parent နှင့် child element များတွင် event မျာ အဘယ်သို့ ပြန့်ထွက်ကြသည်ကို ကြည့်ရှုကြည့်ပါစို့။

<div id="parent">Parent
	<p id="child">Child</p>
</div>

#parent{
	width: 60px;
	padding: 10px;
	border: 1px solid red;
	text-align: center;
}
#child{
	width: 60px;
	marging-right: 40px;
	border: 1px solid blue;
	text-align: center;
}

let parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
	() => alert('parent'), 
	true
);
child.addEventListener('click',
	() => alert('child'), 
	true
);

ဤအရာကိုလည်း ကြည့်ပါ

removeEventListener နည်းလမ်း,
သည် element တစ်ခုမှ event ကို ဖြုတ်ပေးပါသည်။