Event Flow (Bubbling)

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

Event Bubbling ဆိုတာ ဘာလဲ?

ရေထဲက ပူဖောင်းလေးတွေ အောက်ခြေကနေ အပေါ်ယံကို တဖြည်းဖြည်း တက်လာသလိုမျိုး သဘောတရားပါပဲ။ Element တစ်ခုပေါ်မှာ Event တစ်ခု (ဥပမာ - Click နှိပ်လိုက်ခြင်း) ဖြစ်ပွားသွားရင်၊ အဲ့ဒီ Event ဟာ အဲ့ဒီ Element မှာတင် ရပ်မနေဘဲ၊ သူရဲ့ အပေါ်က မိဘ (Parent)၊ ပြီးရင် မိဘရဲ့ မိဘ (Grandparent) .. အဲ့ဒီလိုမျိုး အဆင့်ဆင့် အပေါ်ကို ဆက်လက် ကူးစက် ပြန့်ကားသွားပါတယ်။ ဒါကို Event Bubbling လို့ ခေါ်ပါတယ်။

<div id="parent">
    <button id="child">Click Me</button>
</div>

အထက်ပါ Code အရ button ကို နှိပ်လိုက်ပြီ ဆိုပါစို့ - ၁။ button မှာ တပ်ဆင်ထားတဲ့ Click Event က အရင်ဆုံး အလုပ်လုပ်ပါမယ်။ ၂။ ပြီးတာနဲ့ အပေါ်ကို တက်သွားပြီး div (Parent) မှာ Click Event ရှိရင် အဲ့ဒါပါ ဆက်လက် အလုပ်လုပ်ပါမယ်။ ၃။ အဲ့ဒီကနေတဆင့် body, ပြီးရင် html အထိ ဆက်လက် တက်သွားမှာ ဖြစ်ပါတယ်။

stopPropagation() အသုံးပြုခြင်း

ဒီလိုမျိုး Event က အပေါ်ကို အဆင့်ဆင့် ဆက်မတက်သွားစေချင်ဘူး၊ သက်ဆိုင်ရာ Element မှာတင် ရပ်တန့်သွားစေချင်တယ် ဆိုရင်တော့ e.stopPropagation() ဆိုတဲ့ Method ကို အသုံးပြုပြီး တားဆီးလို့ ရပါတယ်။

let child = document.querySelector("#child");

child.addEventListener("click", function(e) {
    e.stopPropagation(); // "ဒီနေရာမှာပဲ ရပ်တန့်လိုက်တော့! အပေါ်ကို ဆက်မတက်နဲ့တော့" ဟု အမိန့်ပေးခြင်း ဖြစ်သည်
    console.log("Child Clicked");
});