জাভাস্ক্রিপ্টে ঘটনা প্রবাহ প্রক্রিয়া ব্যাখ্যা করুন

জাভাস্ক্রিপ্টে, ইভেন্ট ফ্লো প্রক্রিয়া তিনটি ধারণা দ্বারা সম্পন্ন হয় -

• ইভেন্ট টার্গেট - প্রকৃত DOM বস্তু যেটিতে ঘটনাটি ঘটেছে।

• ইভেন্ট বুদবুদ - নীচে ব্যাখ্যা করা হয়েছে

• ইভেন্ট ক্যাপচারিং - নীচে ব্যাখ্যা করা হয়েছে

ইভেন্ট বুদবুদ হল সেই ক্রম যাতে ইভেন্ট হ্যান্ডলারদের ডাকা হয় যখন একটি উপাদান একটি দ্বিতীয় উপাদানের মধ্যে নেস্ট করা হয় এবং উভয় উপাদান একই ইভেন্টের জন্য একজন শ্রোতা নিবন্ধিত করে (উদাহরণস্বরূপ একটি ক্লিক)। বুদবুদ করার মাধ্যমে, ঘটনাটি প্রথমে অন্তর্নিহিত উপাদান দ্বারা ক্যাপচার এবং পরিচালনা করা হয় এবং তারপরে বাইরের উপাদানগুলিতে প্রচার করা হয়।

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

আসুন উভয়ের উদাহরণ দেখি।

নিম্নলিখিত উভয় উদাহরণের জন্য, নিম্নলিখিত 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);

আপনি যদি উপরের কোডটি চালান এবং ভিতরের ডিভ-এ ক্লিক করেন, আপনি লগ পাবেন −

অভ্যন্তরীণ ডিভ ক্লিক করা হয়েছে

বাইরের ডিভ ক্লিক করা হয়েছে

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

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