এই অধ্যায়ে শিখবো Event Bubbling এবং Event Capturing কী, কীভাবে কাজ করে, এবং এগুলোকে কিভাবে কন্ট্রোল করা যায়।
১. ইভেন্ট প্রপাগেশন (Event Propagation) কী?
ইভেন্ট প্রপাগেশন হলো DOM এ ইভেন্টের ছড়িয়ে পড়ার প্রক্রিয়া। যখন কোনো এলিমেন্টে ইভেন্ট ঘটে, তখন সেই ইভেন্ট DOM গাছের বিভিন্ন স্তরে ছড়িয়ে পড়ে।
ইভেন্ট প্রপাগেশনের দুই প্রধান ধাপ:
-
Capturing phase (Event Capturing)
-
Bubbling phase (Event Bubbling)
২. Event Capturing (ইভেন্ট ক্যাপচারিং)
-
ইভেন্ট শুরু হয় DOM গাছের মূল (root) থেকে শুরু করে টার্গেট এলিমেন্ট পর্যন্ত নিচে নামা পর্যন্ত।
-
অর্থাৎ ইভেন্ট প্রথম প্যারেন্ট এলিমেন্ট থেকে নিচের চাইল্ড এলিমেন্টে চলে আসে।
৩. Event Bubbling (ইভেন্ট ববলিং)
-
ইভেন্ট শুরু হয় টার্গেট এলিমেন্ট থেকে এবং তারপর উপরের দিকে প্যারেন্ট এলিমেন্টগুলোতে ছড়িয়ে পড়ে।
-
অর্থাৎ ইভেন্ট নিচের চাইল্ড থেকে উপরের প্যারেন্টের দিকে চলে যায়।
৪. উদাহরণ: Event Bubbling
<div id="parent" style="padding:20px; background:#ccc;">
প্যারেন্ট ডিভ
<button id="child">চাইল্ড বাটন</button>
</div>
<script>
let parent = document.getElementById('parent');
let child = document.getElementById('child');
parent.addEventListener('click', function() {
alert('প্যারেন্ট ডিভে ক্লিক');
});
child.addEventListener('click', function() {
alert('চাইল্ড বাটনে ক্লিক');
});
</script>
বাবলিং: প্রথমে চাইল্ডে ক্লিকের ইভেন্ট কাজ করবে, তারপর প্যারেন্টের।
৫. Event Capturing ব্যবহার
parent.addEventListener('click', function() {
alert('প্যারেন্ট ডিভে ক্লিক - ক্যাপচারিং');
}, true); // তৃতীয় প্যারামিটার true হলে ক্যাপচারিং হবে
৬. ইভেন্ট প্রপাগেশন বন্ধ করা
কোনো ইভেন্টের ববলিং বা ক্যাপচারিং বন্ধ করতে পারি:
child.addEventListener('click', function(event) {
event.stopPropagation(); // ইভেন্ট প্রপাগেশন বন্ধ করে
alert('চাইল্ড বাটনে ক্লিক');
});
৭. সারসংক্ষেপ
| বিষয় | বর্ণনা |
|---|---|
| Capturing | ইভেন্ট ডাউন ওয়ার্ড ট্রাভার্সাল (root থেকে child) |
| Bubbling | ইভেন্ট আপওয়ার্ড ট্রাভার্সাল (child থেকে root) |
| stopPropagation | ইভেন্টের ছড়িয়ে পড়া বন্ধ করা |
এই অধ্যায়ে শেখা গুরুত্বপূর্ণ পয়েন্ট:
-
ইভেন্ট ববলিং ও ক্যাপচারিং কী
-
কীভাবে addEventListener তৃতীয় প্যারামিটার দিয়ে ক্যাপচারিং চালু হয়
-
event.stopPropagation() দিয়ে ইভেন্ট ছড়ানো বন্ধ করা
পরবর্তী অধ্যায়:
অধ্যায় ২৯: JavaScript Async/Await পরিচিতি
লিখুন: “অধ্যায় ২৯ শুরু করো” — তাহলে শিখবো আসিঙ্ক্রোনাস প্রোগ্রামিং নিয়ে।