3.8. Event capturing এবং bubbling এর পার্থক্য

 

DOM ইভেন্টগুলি ইভেন্ট প্রোপাগেশন 3টি পর্যায় বর্ণনা করে: ক্যাপচারিং ফেজ – ইভেন্টটি এলিমেন্ট চলে যায়। টার্গেট ফেজ – ইভেন্ট টার্গেট এলিমেন্টে পৌঁছেছে। বাবলিং পর্যায় – ঘটনাটি এলিমেন্ট থেকে উঠে।

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

 

আপনি চাইলে বাবলিং টাকে রোধ করতে পারেন, জাস্ট stopPropagation মেথড ব্যবহার করে।

document.querySelector('#signin').addEventListener('click', (e) => {
   e.stopPropagation();
   console.log('Sign in button click');
});

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