JavaScript HTML DOM EventListener
addEventListener() နည်းလမ်း
ဥပမာ
အသုံးပြုသူတစ်ဦးက ခလုတ်တစ်ခုကို နှိပ်သည့်အခါ မီးလောင်သည့် ဖြစ်ရပ်နားဆင်သူကို ထည့်ပါ-
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener()နည်းလမ်းသည် ဖြစ်ရပ်ကိုင်တွယ်သူကို သတ်မှတ်ထားသော ဒြပ်စင်သို့ ပူးတွဲသည် ။
နည်းလမ်း သည် addEventListener()ရှိပြီးသား အဖြစ်အပျက် ကိုင်တွယ်သူများကို မရေးဘဲ ဒြပ်စင်တစ်ခုသို့ ပူးတွဲသည်။
အစိတ်အပိုင်းတစ်ခုတွင် ဖြစ်ရပ်ကိုင်တွယ်သူအများအပြားကို သင်ထည့်နိုင်သည်။
"ကလစ်" ဖြစ်ရပ်နှစ်ခုကို ဆိုလိုသည်မှာ ဒြပ်စင်တစ်ခုသို့ အမျိုးအစားတူဖြစ်ရပ်ကိုင်တွယ်သူအများအပြားကို သင်ထည့်နိုင်သည်။
HTML ဒြပ်စင်များသာမက DOM အရာဝတ္ထုတစ်ခုခုတွင် ပွဲနားထောင်သူများကို သင်ထည့်နိုင်သည်။ ဆိုလိုတာက window object ပါ။
အဆိုပါ addEventListener()နည်းလမ်းသည် အဖြစ်အပျက်က ပွက်ပွက်ဆူနေသော တုံ့ပြန်မှုကို ထိန်းချုပ်ရန် ပိုမိုလွယ်ကူစေသည်။
နည်းလမ်းကို အသုံးပြုသည့်အခါ addEventListener()၊ ပိုမိုကောင်းမွန်စွာဖတ်ရှုနိုင်စေရန်အတွက် JavaScript ကို HTML markup နှင့် ခွဲခြားထားပြီး HTML markup ကိုမထိန်းချုပ်နိုင်သည့်အခါတွင်ပင် ပွဲနားထောင်သူများကို ထည့်သွင်းနိုင်စေမည်ဖြစ်သည်။
removeEventListener()နည်းလမ်းကို အသုံးပြု၍ ပွဲနားထောင်သူကို အလွယ်တကူ ဖယ်ရှားနိုင်သည် ။
အထားအသို
element.addEventListener(event, function, useCapture);
ပထမဘောင်သည် ပွဲအမျိုးအစား ( " click" သို့မဟုတ် " mousedown" သို့မဟုတ် အခြားသော HTML DOM Event ကဲ့သို့ )
ဒုတိယ parameter သည် event ဖြစ်ပေါ်လာသောအခါတွင်ကျွန်ုပ်တို့ခေါ်လိုသော function ဖြစ်သည်။
တတိယ ကန့်သတ်ချက်သည် အဖြစ်အပျက် bubbling သို့မဟုတ် ဖြစ်ရပ်ကို ဖမ်းယူခြင်းအား အသုံးပြုရန် သတ်မှတ်သည့် ဘူလီယံတန်ဖိုးဖြစ်သည်။ ဤကန့်သတ်ချက်သည် စိတ်ကြိုက်ရွေးချယ်နိုင်သည်။
ပွဲအတွက် "on" ရှေ့ဆက်ကို အသုံးမပြုကြောင်း သတိပြုပါ။ " click"" အစား "" ကိုသုံးပါ onclick။
Element တစ်ခုသို့ Event Handler တစ်ခုထည့်ပါ။
ဥပမာ
သတိပေးချက် "Hello World!" အသုံးပြုသူသည် ဒြပ်စင်တစ်ခုကို နှိပ်သောအခါ-
element.addEventListener("click", function(){ alert("Hello World!"); });
ပြင်ပ "အမည်" လုပ်ဆောင်ချက်ကိုလည်း ကိုးကားနိုင်သည်-
ဥပမာ
သတိပေးချက် "Hello World!" အသုံးပြုသူသည် ဒြပ်စင်တစ်ခုကို နှိပ်သောအခါ-
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
တူညီသောဒြပ်စင်သို့ Event Handlers အများအပြားထည့်ပါ။
addEventListener()နည်းလမ်းသည် သင့်အား ရှိပြီးသားဖြစ်ရပ်များကို ထပ်မရေးဘဲ တူညီသောဒြပ်စင်သို့ ဖြစ်ရပ်များစွာကို ထည့်သွင်းနိုင်စေသည် -
ဥပမာ
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
တူညီသောဒြပ်စင်သို့ အမျိုးအစားအမျိုးမျိုး၏ အဖြစ်အပျက်များကို သင်ထည့်သွင်းနိုင်သည်-
ဥပမာ
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Window Object သို့ Event Handler တစ်ခုထည့်ပါ။
နည်းလမ်း သည် addEventListener()HTML ဒြပ်စင်များ၊ HTML မှတ်တမ်း၊ ဝင်းဒိုးအရာဝတ္ထု သို့မဟုတ် အရာဝတ္ထုကဲ့သို့ ဖြစ်ရပ်များကို ပံ့ပိုးပေးသည့် အခြား HTML ဒြပ်စင်များကဲ့သို့ မည်သည့် HTML DOM အရာဝတ္တုတွင်မဆို အဖြစ်အပျက် နားထောင်သူများကို ထည့်ခွင့်ပြုသည် xmlHttpRequest။
ဥပမာ
အသုံးပြုသူတစ်ဦး ဝင်းဒိုးကို အရွယ်အစားပြောင်းသည့်အခါ မီးလောင်သည့်ဖြစ်ရပ်နားဆင်သူကို ထည့်ပါ-
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Passing Parameters
ကန့်သတ်ဘောင်တန်ဖိုးများကို ဖြတ်သန်းသည့်အခါ၊ သတ်မှတ်ထားသော လုပ်ဆောင်ချက်ကို ကန့်သတ်ဘောင်များဖြင့် ခေါ်သည့် "အမည်မသိ လုပ်ဆောင်ချက်" ကို အသုံးပြုပါ-
ဥပမာ
element.addEventListener("click", function(){ myFunction(p1, p2); });
Event Bubbling သို့မဟုတ် Event Capturing?
HTML DOM တွင် အဖြစ်အပျက် ပြန့်ပွားခြင်း နည်းလမ်းနှစ်သွယ် ၊ ပွက်ပွက်လောရိုက်ခြင်း နှင့် ဖမ်းယူခြင်း ။
Event propagation သည် event တစ်ခုဖြစ်ပေါ်လာသောအခါ element order ကို သတ်မှတ်သည့်နည်းလမ်းတစ်ခုဖြစ်သည်။ သင့်တွင် <p> ဒြပ်စင်တစ်ခု <div> ဒြပ်စင်တစ်ခု ရှိပြီး၊ အသုံးပြုသူက <p> ဒြပ်စင်ကို နှိပ်ပါက၊ မည်သည့်ဒြပ်စင်၏ "ကလစ်" ဖြစ်ရပ်ကို ဦးစွာ ကိုင်တွယ်သင့်သနည်း။
အတွင်းပိုင်းဒြပ်စင်အများစု၏ အဖြစ်အပျက်ကို ပွက်ပွက် ဆူအောင် စီမံပြီးနောက် ပြင်ပကို ကိုင်တွယ်သည်- <p> ဒြပ်စင်၏ ကလစ်ဖြစ်ရပ်ကို ဦးစွာကိုင်တွယ်သည်၊ ထို့နောက် <div> ဒြပ်စင်၏ ကလစ်ဖြစ်ရပ်။
ပြင်ပဒြပ်စင်အများစု၏ ဖြစ်ရပ်ကို ဖမ်းယူ ရာတွင် ဦးစွာကိုင်တွယ်ပြီးနောက် အတွင်းပိုင်းကို ကိုင်တွယ်သည်- <div> ဒြပ်စင်၏ ကလစ်ဖြစ်ရပ်ကို ဦးစွာကိုင်တွယ်မည်ဖြစ်ပြီး၊ ထို့နောက် <p> ဒြပ်စင်၏ ကလစ်ဖြစ်ရပ်ကို ကိုင်တွယ်မည်ဖြစ်သည်။
addEventListener() နည်းလမ်းဖြင့် "useCapture" ဘောင်ကို အသုံးပြု၍ ဖြန့်ဝေခြင်း အမျိုးအစားကို သင် သတ်မှတ်နိုင်သည်-
addEventListener(event, function, useCapture);
ပုံသေတန်ဖိုးသည် မှားနေသည်၊ ၎င်းသည် bubbling propagation ကိုအသုံးပြုမည်ဖြစ်ပြီး၊ တန်ဖိုးကို true ဟုသတ်မှတ်သောအခါ၊ event သည် capturing propagation ကိုအသုံးပြုသည်။
ဥပမာ
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener() နည်းလမ်း
နည်းလမ်း သည် removeEventListener()addEventListener() method ဖြင့် ပူးတွဲပါရှိသော event handlers ကို ဖယ်ရှားသည်-
ဥပမာ
element.removeEventListener("mousemove", myFunction);
HTML DOM Event Object ရည်ညွှန်းချက်
HTML DOM ဖြစ်ရပ်များအားလုံး၏စာရင်းအတွက်၊ ကျွန်ုပ်တို့၏ပြီးပြည့်စုံသော HTML DOM Event Object Reference ကိုကြည့် ပါ။