MooTools-এ Bubbling এবং Capturing ইভেন্ট ম্যানেজমেন্ট একটি গুরুত্বপূর্ণ বিষয়, যা ইভেন্টগুলি ডোমের মধ্যে কীভাবে ট্রিগার এবং প্রপাগেট হয় তা নির্ধারণ করে। এটি মূলত ইভেন্ট প্রপাগেশন (event propagation) এর দুইটি ফেজ— bubbling এবং capturing—এ কাজ করে, এবং MooTools এই প্রক্রিয়া সহজ এবং কার্যকরভাবে পরিচালনা করার জন্য কার্যকরী ফিচার সরবরাহ করে।
Bubbling এবং Capturing কি?
Event Bubbling (ইভেন্ট বাবলিং): ইভেন্ট শুরু হয় ঐ উপাদান (element) থেকে যেটি ইভেন্টটি ট্রিগার করেছে, তারপর ইভেন্টটি তার প্যারেন্ট (parent) উপাদানে গিয়ে পৌঁছায় এবং এমনভাবে আরও উপরের স্তরে প্রপাগেট (propagate) হয় যতক্ষণ না রুট এলিমেন্ট (document) পৌঁছায়।
উদাহরণস্বরূপ, আপনি যদি একটি বাটনে ক্লিক করেন, তাহলে সেই ক্লিক ইভেন্ট প্রথমে বাটনে ট্রিগার হবে, তারপর সেই ইভেন্টটি তার প্যারেন্ট উপাদান (যেমন: ডিভ) এ পৌঁছাবে, এবং শেষে রুট উপাদান (document) পর্যন্ত পৌঁছাবে।
- Event Capturing (ইভেন্ট ক্যাপচারিং): ক্যাপচারিং প্রক্রিয়ায়, ইভেন্ট রুট এলিমেন্ট থেকে শুরু হয় এবং ধীরে ধীরে তার চিলড (child) উপাদানের দিকে চলে আসে। এখানে, ইভেন্ট প্রথমে রুট উপাদানে ট্রিগার হয়, তারপর তা ধীরে ধীরে তার চিলড উপাদানে পৌঁছায়।
MooTools-এ Bubbling এবং Capturing ব্যবস্থাপনা
MooTools-এ ইভেন্ট হ্যান্ডলিং একটি শক্তিশালী সিস্টেম, যা আপনাকে bubbling এবং capturing উভয় প্রক্রিয়া নিয়ন্ত্রণ করতে দেয়। MooTools-এর addEvent() মেথড দিয়ে আপনি এই প্রক্রিয়াগুলি নির্ধারণ করতে পারেন।
১. Bubbling ইভেন্ট হ্যান্ডলিং
MooTools-এ event bubbling ডিফল্ট হিসেবে চালু থাকে। যখন আপনি কোনো উপাদানে ইভেন্ট হ্যান্ডলার অ্যাটাচ করেন, তখন সেই ইভেন্টটি উপরের প্যারেন্ট উপাদানগুলিতেও ট্রিগার হতে থাকে।
window.addEvent('domready', function() {
var button = $('myButton');
// বাটনে ক্লিক করার পর সেই ক্লিক ইভেন্ট প্যারেন্ট ডিভে বাবল হবে
button.addEvent('click', function(event) {
alert('Button clicked!');
});
// প্যারেন্ট ডিভে ক্লিক হলে ইভেন্ট বাবল হবে
$('parentDiv').addEvent('click', function(event) {
alert('Parent Div clicked!');
});
});
এখানে:
- যখন
myButtonএ ক্লিক করা হবে, ইভেন্টটিparentDivপর্যন্ত পৌঁছাবে এবংparentDivএর ইভেন্ট হ্যান্ডলারও ট্রিগার হবে। - এটি bubbling এর উদাহরণ, যেখানে ইভেন্টটি শুরু হয়ে প্যারেন্ট পর্যন্ত পৌঁছে।
২. Capturing ইভেন্ট হ্যান্ডলিং
MooTools-এ event capturing ব্যবস্থাপনা করতে আপনি useCapture অপশনটি ব্যবহার করতে পারেন। এই অপশনটি ইভেন্টের ক্যাপচারিং ফেজে ইভেন্ট হ্যান্ডলারকে অ্যাটাচ করতে ব্যবহৃত হয়।
window.addEvent('domready', function() {
var button = $('myButton');
// ক্যাপচারিং ফেজে বাটনে ক্লিক ইভেন্ট হ্যান্ডল করা
button.addEvent('click', function(event) {
alert('Button clicked during capturing phase!');
}, true); // true ব্যবহার করে capturing ফেজ সক্রিয় করা হয়েছে
});
এখানে:
useCapture = trueব্যবহার করে capturing phase চালু করা হয়েছে, যার মানে হল যে ইভেন্টটি button এ ক্লিক করার আগে রুট উপাদান (document) থেকে শুরু হয়ে button এ পৌঁছাবে।addEvent()মেথডের তৃতীয় আর্গুমেন্ট হিসেবেtrueদিয়েই capturing phase সক্রিয় করা হয়।
৩. Bubbling এবং Capturing এর মধ্যে পার্থক্য
- Bubbling: ইভেন্টটি উপরের প্যারেন্ট উপাদানগুলিতে প্রবাহিত হয়, অর্থাৎ ইভেন্ট প্রথমে যেই উপাদানটি ট্রিগার করেছে, তার পরবর্তী স্তরে (প্যারেন্ট) প্রবাহিত হয়। এটি MooTools-এ ডিফল্ট ইভেন্ট প্রপাগেশন পদ্ধতি।
- Capturing: ইভেন্টটি রুট উপাদান (document) থেকে শুরু হয়ে ধীরে ধীরে চিলড উপাদানগুলির দিকে আসে। আপনি
useCaptureঅপশন ব্যবহার করে এটি সক্রিয় করতে পারেন।
৪. Stop Propagation (ইভেন্ট প্রপাগেশন বন্ধ করা)
যদি আপনি চান যে ইভেন্টটি কোনো স্তরে পৌঁছানোর পর আর আগের স্তরে না গিয়ে থেমে যাবে, তাহলে stopPropagation() মেথড ব্যবহার করতে পারেন। এটি ইভেন্টের প্রপাগেশন থামিয়ে দেয়, অর্থাৎ ইভেন্ট আর প্যারেন্টে পৌঁছাবে না।
window.addEvent('domready', function() {
var button = $('myButton');
button.addEvent('click', function(event) {
event.stopPropagation(); // ইভেন্ট প্রপাগেশন বন্ধ করা
alert('Button clicked!');
});
$('parentDiv').addEvent('click', function(event) {
alert('Parent Div clicked!'); // এটি আর ট্রিগার হবে না, কারণ প্রপাগেশন থামিয়ে দেওয়া হয়েছে
});
});
এখানে:
stopPropagation()ব্যবহার করা হয়েছে, যাতে ইভেন্টের প্রপাগেশন থামানো হয় এবং parentDiv এর ক্লিক ইভেন্ট হ্যান্ডলার ট্রিগার না হয়।
MooTools-এ Bubbling এবং Capturing এর সুবিধা
- ইভেন্ট ম্যানেজমেন্টের সুবিধা: Bubbling এবং Capturing ব্যবস্থাপনা ইভেন্ট ম্যানেজমেন্টকে আরও সুবিধাজনক এবং নিয়ন্ত্রণযোগ্য করে তোলে, যেখানে আপনি সহজেই ইভেন্টের প্রপাগেশন পরিচালনা করতে পারেন।
- কাস্টম ইভেন্ট হ্যান্ডলার: আপনি যখন ইভেন্টের ক্যাপচারিং ফেজ বা বাবলিং ফেজ নিয়ন্ত্রণ করেন, তখন কাস্টম ইভেন্ট হ্যান্ডলার তৈরি করতে পারেন, যা আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং স্মুথ করতে সাহায্য করে।
- অত্যন্ত নিয়ন্ত্রণযোগ্য ইন্টারঅ্যাকশন: Bubbling এবং Capturing মেথড ব্যবহার করে আপনি কোন ইভেন্ট কোন স্তরে ট্রিগার হবে তা নিয়ন্ত্রণ করতে পারেন, যা একটি ওয়েব পেজের ইন্টারঅ্যাকশন আরো কার্যকরী করে তোলে।
সারাংশ
MooTools-এ Bubbling এবং Capturing ইভেন্ট ম্যানেজমেন্ট ডেভেলপারদেরকে ইভেন্ট প্রপাগেশন প্রক্রিয়া নিয়ন্ত্রণ করতে সহায়তা করে। আপনি ইভেন্টগুলি হ্যান্ডেল করতে addEvent() মেথডে useCapture অপশন ব্যবহার করতে পারেন। এছাড়া, stopPropagation() মেথড ব্যবহার করে ইভেন্ট প্রপাগেশন থামিয়ে দেওয়া সম্ভব। MooTools এর এই ফিচার ওয়েব অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভ ও নিয়ন্ত্রিত ইভেন্ট হ্যান্ডলিং নিশ্চিত করে।
Read more
