JavaScript အတွက် ဖြစ်ရပ် ကိုယ်စားပြုခြင်း

အရင် သင်ခန်းစာမှာ အသစ်ထပ်ထည့်တဲ့ အစိတ်အပိုင်းတွေအတွက် ပေါ်လာတတ်တဲ့ ပြဿနာကို ဖော်ပြပြီး အဲဒီပြဿနာအတွက် ဖြေရှင်းနည်းကို ပြသခဲ့ပါတယ်။ ဒီသင်ခန်းစာမှာတော့ ဒီပြဿနာကို ကျော်လွှားဖို့ ပိုကောင်းတဲ့နည်းလမ်းတစ်ခုကို ကြည့်ပါမယ် - ဖြစ်ရပ် ကိုယ်စားပြုခြင်း။ ဒါကို စိတ်ဝင်စားစရာ လေ့လာကြည့်ရအောင်။

သင်သိပြီးသားအတိုင်း li ကို နှိပ်လိုက်ရင် ul ကိုပါ တစ်ခါတည်း နှိပ်ရာရောက်ပါတယ်။ ဒါက ဖြစ်ရပ်တွေ အပေါ်ကို တက်သွားတဲ့ (bubbling) စွမ်းရည်ကြောင့် ဖြစ်နိုင်တာပါ။ ဒီစွမ်းရည်ကို ကျွန်တော်တို့ရဲ့ တာဝန်ကို ဖြေရှင်းဖို့အတွက် အသုံးချနိုင်ပါတယ်။ li တစ်ခုချင်းစီမှာ ဖြစ်ရပ်တွေ မချိတ်ဘဲ သူတို့ရဲ့ မိဘ ul မှာ ချိတ်လိုက်ပါမယ်။

javascriptlist.addEventListener('click', function() {
  
});

အခု ဖြစ်ရပ် ကိုင်တွယ်ဖြေရှင်းသူ (event handler) ထဲမှာ this က ချိတ်ဆက်ထားတဲ့ အစိတ်အပိုင်းကို ညွှန်ပြမှာ ဖြစ်ပြီး၊ event.target ကတော့ ဖြစ်ရပ် ဖြစ်ပွားခဲ့တဲ့ အစိတ်အပိုင်းကို ညွှန်ပြမှာ ဖြစ်ပါတယ်။

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // ကျွန်တော်တို့ရဲ့ စာရင်း
  console.log(event.target); // စာရင်းအမှတ်
});

နှိပ်လိုက်တဲ့ li ရဲ့ နောက်ဆုံးမှာ အာမေဍိတ်အမှတ်အသား (!) ကို ထည့်ပေးလိုက်အောင် လုပ်ကြည့်ရအောင်။

javascriptlist.addEventListener('click', function(event) {
  event.target.textContent = event.target.textContent + '!';
});