জাভাস্ক্রিপ্টে ইভেন্ট ফ্লো প্রসেস ব্যাখ্যা

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

• ইভেন্ট টার্গেট − সেটি আসল DOM অবজেক্ট যেটিতে ইভেন্ট ঘটেছে।

• ইভেন্ট বাবলিং − নিচে ব্যাখ্যা করা হয়েছে

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

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

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

চলুন দুটি উদাহরণ দেখি।

নিচের দুটি উদাহরণের জন্য, নিচের HTML তৈরি করুন -

উদাহরণ

 Outer Div 
 Inner 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