JavaScript တွင် Event Bubbling ကိုရပ်တန့်ခြင်း၏အသုံးပြုမှု

မိဘ element တစ်ခုအတွင်း၌ button တစ်ခုနှင့် block တစ်ခုရှိသည်ဟု ဆိုကြပါစို့။

html<div id="parent">
  <button>click me</button>
  <div id="block">
    text
  </div>
</div>

ကျွန်ုပ်တို့၏ element များကို variable များထဲသို့ ရယူကြမည်။

javascriptlet parent = document.querySelector('#parent');
let button = document.querySelector('button');
let block  = document.querySelector('#block');

ကျွန်ုပ်တို့၏ block သည် ကနဦးတွင် ဝှက်ထားသည်ဟု ဆိုကြပါစို့။

css#block:not(.active) {
  display: none;
}

button ကို ကလစ်လိုက်သောအခါ ကျွန်ုပ်တို့၏ block ပေါ်လာစေရန် ပြုလုပ်ကြမည်။

javascriptbutton.addEventListener('click', function() {
  block.classList.add('active');
});

ယခုထပ်မံ၍ မိဘ element ပေါ်ရှိ မည်သည့်နေရာကိုမဆို ကလစ်လိုက်သောအခါ ကျွန်ုပ်တို့၏ block ဝှက်သွားစေရန် ပြုလုပ်ကြမည်။

javascriptparent.addEventListener('click', function() {
  block.classList.remove('active');
});

သို့ရာတွင် ကျွန်ုပ်တို့အား မျှော်လင့်မထားသော အံ့အားသင့်ဖွယ်ရာ တစ်ခုစောင့်ဆိုင်းနေသည်။ button သည် မိဘ element အတွင်း၌ တည်ရှိသောကြောင့် button ကိုကလစ်ခြင်းသည် မိဘ element ကိုကလစ်ခြင်းလည်းဖြစ်သည်။ ဆိုလိုသည်မှာ ပထမဦးစွာ ကျွန်ုပ်တို့၏ block ပေါ်လာမည်၊ ထို့နောက် event bubbling ကြောင့် မိဘ element ရှိ event handler ကို trigger ဖြစ်စေပြီး ကျွန်ုပ်တို့၏ block ပြန်ဝှက်သွားမည်။

ဤနေရာတွင်ပင် bubbling ကိုရပ်တန့်နိုင်သည့် အစွမ်းသတ္တိသည် အသုံးတည့်လာသည်။ button ကိုကလစ်သောအခါ bubbling ကိုရပ်တန့်ပြီး မိဘ element က ထို click ကို တုံ့ပြန်ခြင်းမရှိစေရန် ကျွန်ုပ်တို့ပြုလုပ်နိုင်သည်။