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) - এর সাথে সাদৃশ্য রেখে বায়ুর বুদবুদ নীচ থেকে উপরে ওঠার মতো। যেমন একটি বুদবুদ, আমাদের ইভেন্টটি যেন উপরে ভেসে উঠছে, প্রতিবার ট্রিগার হচ্ছে উচ্চতর ব্লকে।