জাভাস্ক্রিপ্টে ইভেন্ট বাবলিং এবং ক্যাপচারিং

ইভেন্ট বাবলিং হলো ইভেন্ট হ্যান্ডলার কল হওয়ার অর্ডার যখন একটি এলিমেন্ট অন্য এলিমেন্টের ভেতরে নেস্টেড থাকে এবং উভয় এলিমেন্টে একই ইভেন্টের (যেমন click) লিসেনার রেজিস্টার্ড থাকে। বাবলিং-এ, ইভেন্টটি প্রথমে ইনারমোস্ট এলিমেন্টে ক্যাপচার ও হ্যান্ডেল হয়, তারপর আউটার এলিমেন্টগুলোর দিকে প্রপাগেট হয়।

ইভেন্ট ক্যাপচারিং-এ, ইভেন্টটি প্রথমে আউটারমোস্ট এলিমেন্টে ক্যাপচার হয় এবং ইনার এলিমেন্টগুলোর দিকে প্রপাগেট হয়।

উদাহরণ

দুই উদাহরণের জন্য নিচের HTML তৈরি করুন:

<div id='outer' style='background-color:red;display:inline-block;padding:50px;'> 
  Outer Div 
  <div id='inner' style='background-color:yellow;display:inline-block;padding:50px;'> 
    Inner Div 
  </div> 
</div>

১. ইভেন্ট বাবলিং (ডিফল্ট)

document.querySelector('#outer').addEventListener('click', e => {
  console.log('Outer div is clicked');
}, false);

document.querySelector('#inner').addEventListener('click', e => {
  console.log('Inner div is clicked');
}, false);

ইনার ডিবে ক্লিক করলে লগ অর্ডার:

Inner div is clicked
Outer div is clicked

২. ইভেন্ট ক্যাপচারিং

document.querySelector('#outer').addEventListener('click', e => {
  console.log('Outer div is clicked');
}, true);

document.querySelector('#inner').addEventListener('click', e => {
  console.log('Inner div is clicked');
}, true);

ইনার ডিবে ক্লিক করলে লগ অর্ডার:

Outer div is clicked
Inner div is clicked

ইভেন্ট ফ্লো ফেজ

1. ক্যাপচারিং ফেজ: উইন্ডো → ডকুমেন্ট → রুট → ... → টার্গেটের প্যারেন্ট
2. টার্গেট ফেজ: টার্গেট এলিমেন্টে
3. বাবলিং ফেজ: টার্গেটের প্যারেন্ট → ... → রুট → ডকুমেন্ট → উইন্ডো

addEventListener-র থার্ড আর্গামেন্ট useCapture: true = ক্যাপচারিং, false (ডিফল্ট) = বাবলিং। event.stopPropagation() দিয়ে প্রপাগেশন रोका যায়।