Event Listeners

JavaScript မှာ Event တစ်ခုခု (ဥပမာ - User က ခလုတ်နှိပ်ခြင်း) ဖြစ်လာမယ့် အချိန်ကို စောင့်ကြည့်နေပြီး၊ အကယ်၍ တကယ် ဖြစ်လာခဲ့ရင် သတ်မှတ်ထားတဲ့ Function တစ်ခုကို အလုပ်လုပ် (Run) ခိုင်းဖို့အတွက် addEventListener ဆိုတဲ့ Method ကို အသုံးပြုရပါတယ်။

Syntax (ရေးသားပုံ)

element.addEventListener("event_name", function);

ဥပမာ (Example) - Click Me Button

// ၁။ အရင်ဆုံး အလုပ်လုပ်စေချင်တဲ့ Element ကို ရွေးချယ် (Select) ပါမယ်
const btn = document.querySelector("#my-btn");

// ၂။ အဲ့ဒီ Element ပေါ်မှာ Event Listener တပ်ဆင်ပါမယ်
btn.addEventListener("click", function() {
  alert("Button was clicked! 🎉");
});

Function ကို အထဲမှာ တိုက်ရိုက် ရေးမယ့်အစား၊ အပြင်မှာ သီးသန့် ခွဲရေးထားပြီးမှ နာမည်နဲ့ ပြန်ခေါ်ထည့်ရင်လည်း ရပါတယ်။

function handleClick() {
    console.log("Clicked!");
}

// ခေါ်ထည့်တဲ့အခါ `()` တွန့်ကွင်း မပါတာကို သတိပြုပါ
btn.addEventListener("click", handleClick);

The Event Object (e)

Event တစ်ခု ဖြစ်ပွားသွားတဲ့ အခါတိုင်းမှာ Browser ကနေ အဲ့ဒီ Event နဲ့ ပတ်သက်တဲ့ အသေးစိတ် အချက်အလက်တွေ (ဥပမာ - Mouse ရဲ့ ဘယ်နေရာကို နှိပ်လိုက်တာလဲ၊ ကီးဘုတ်ရဲ့ ဘယ်ခလုတ်ကို နှိပ်လိုက်တာလဲ စသဖြင့်) ကို Object တစ်ခု အနေနဲ့ ကျွန်တော်တို့ဆီ အလိုအလျောက် ပို့ပေးပါတယ်။ အဲ့ဒီ Object ကို များသောအားဖြင့် e သို့မဟုတ် event လို့ နာမည်ပေးပြီး လက်ခံရယူလေ့ ရှိပါတယ်။

btn.addEventListener("click", function(e) {
    console.log(e); // Event နဲ့ ပတ်သက်တဲ့ အချက်အလက် အားလုံးကို ထုတ်ကြည့်နိုင်ပါတယ်
    console.log(e.target); // User က ဘယ် Element ကို အတိအကျ နှိပ်လိုက်တာလဲ ဆိုတာကို ပြပေးပါတယ်
});