JavaScript ရှိ ဖြစ်ရပ်များ ပေါ်ပေါက်လာခြင်း

သင့်တွင် တစ်ခုနှင့်တစ်ခု အထပ်ထပ် ထည့်ထားသော ဘလောက်များ ရှိသည်ဟု စိတ်ကူးကြည့်ပါ။

html<div id="elem1">
  <div id="elem2">
    <div id="elem3"></div>
  </div>
</div>

ကျွန်ုပ်တို့၏ div များကို ကိန်းရှင်များထဲသို့ ရယူကြပါစို့။

javascriptlet elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');

ယခု ၎င်းတို့ပေါ်တွင် ကလစ်နှိပ်ခြင်း လုပ်ဆောင်ချက်များ ထည့်ပါမည်။

javascriptelem1.addEventListener('click', function() {
  alert('အစိမ်း');
});
elem2.addEventListener('click', function() {
  alert('အပြာ');
});
elem3.addEventListener('click', function() {
  alert('အနီ');
});

CSS အချို့ ထည့်ခြင်းဖြင့် ကျွန်ုပ်တို့၏ ဘလောက်များကို စခရင်ပေါ်တွင် ပြသပါမည်။

ယခု အတွင်းပိုင်းဆုံး အနီရောင် ဘလောက်ကို နှိပ်ကြည့်ပါ - ထို့နောက် ဖြစ်ရပ်သည် ပထမဦးစွာ အနီရောင် ဘလောက်တွင်၊ ထို့နောက် အပြာရောင်တွင်၊ ထို့နောက် အစိမ်းရောင်တွင် ဖြစ်ပွားသည်ကို သင်မြင်ရလိမ့်မည်။ ဤအရာသည် ယုတ္တိရှိပါသည်၊ အဘယ်ကြောင့်ဆိုသော် အတွင်းပိုင်း ဘလောက်ကို နှိပ်ခြင်းအားဖြင့် သင်သည် အပြင်ဘက် အားလုံးကို တစ်ချိန်တည်းတွင် နှိပ်နေခြင်း ဖြစ်သောကြောင့်ဖြစ်သည်။

ဆိုလိုသည်မှာ သင်သည် အတွင်းပိုင်းဆုံး ဘလောက်ကို နှိပ်သောအခါ၊ ကလစ်နှိပ်ခြင်း ဖြစ်ရပ်သည် ပထမဦးစွာ ၎င်းထဲတွင် ပေါ်ပေါက်လာပြီး၊ ထို့နောက် ၎င်း၏ မိဘထဲတွင်၊ ၎င်း၏ မိဘ၏ မိဘထဲတွင် လုပ်ဆောင်ပြီး၊ အထက်ဆုံးသို့ မရောက်မချင်း ဆက်သွားသည်။

ဤကဲ့သို့သော အပြုအမူကို ဖြစ်ရပ်များ ပေါ်ပေါက်လာခြင်း (bubbling) ဟုခေါ်ပြီး၊ လေပူဖောင်းတစ်ခု ရေအောက်ကနေ ပေါ်လာသည့် ဥပမာနှင့် တူညီသည်။ ကျွန်ုပ်တို့၏ ဖြစ်ရပ်သည် ပူဖောင်းကဲ့သို့ပင် အထက်သို့ ပေါ်လာသည်ဟု ထင်ရပြီး၊ အမြဲတမ်း ပိုမြင့်သော ဘလောက်များပေါ်တွင် လုပ်ဆောင်နေသည်ဟု ဆိုနိုင်သည်။