ইভেন্ট বুদবুদ হল সেই ক্রম যাতে ইভেন্ট হ্যান্ডলারদের ডাকা হয় যখন একটি উপাদান একটি দ্বিতীয় উপাদানের মধ্যে নেস্ট করা হয় এবং উভয় উপাদান একই ইভেন্টের জন্য একজন শ্রোতা নিবন্ধিত করে (উদাহরণস্বরূপ একটি ক্লিক)। বুদবুদ করার মাধ্যমে, ঘটনাটি প্রথমে অন্তর্নিহিত উপাদান দ্বারা ক্যাপচার এবং পরিচালনা করা হয় এবং তারপরে বাইরের উপাদানগুলিতে প্রচার করা হয়।
ক্যাপচার করার সাথে সাথে, ঘটনাটি প্রথমে বাইরের উপাদান দ্বারা ক্যাপচার করা হয় এবং ভিতরের উপাদানগুলিতে প্রচার করা হয়।
আসুন উভয়ের উদাহরণ দেখি।
নিম্নলিখিত উভয় উদাহরণের জন্য, নিম্নলিখিত 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>
1. ইভেন্ট বুদবুদ
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
