MooTools লাইব্রেরি ব্যবহার করে কাস্টম ইভেন্ট (Custom Event) তৈরি এবং হ্যান্ডল করা খুবই সহজ। এটি ডেভেলপারদের জন্য একটি শক্তিশালী টুল, যা ওয়েব পেজের ইন্টারঅ্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্স (UX) উন্নত করতে সাহায্য করে। MooTools-এর মাধ্যমে আপনি নতুন ইভেন্ট তৈরি করতে পারেন এবং নির্দিষ্ট উপাদানগুলোর উপর ইভেন্ট হ্যান্ডলার সেট করতে পারেন।
কাস্টম ইভেন্ট তৈরি করা
MooTools-এ কাস্টম ইভেন্ট তৈরি করতে Event ক্লাসের সাহায্যে নতুন ইভেন্ট তৈরি করা হয়। এটি ডেভেলপারদের বিশেষ ধরনের ইভেন্ট (যেমন, ইউজারের কোনো নির্দিষ্ট অ্যাকশন) ট্রিগার করতে সক্ষম করে।
নিচে একটি উদাহরণ দেয়া হলো:
// একটি কাস্টম ইভেন্ট তৈরি করা
var customEvent = new Event('myCustomEvent');
// কাস্টম ইভেন্ট হ্যান্ডল করা
document.id('myElement').addEvent('myCustomEvent', function() {
alert('কাস্টম ইভেন্ট ট্রিগার হয়েছে!');
});
// কাস্টম ইভেন্ট ট্রিগার করা
document.id('myElement').fireEvent('myCustomEvent');
এখানে, myCustomEvent নামে একটি কাস্টম ইভেন্ট তৈরি করা হয়েছে এবং addEvent() মেথডের মাধ্যমে এই ইভেন্টের জন্য একটি হ্যান্ডলার যোগ করা হয়েছে। এরপর fireEvent() মেথড ব্যবহার করে কাস্টম ইভেন্টটিকে ট্রিগার করা হয়েছে।
কাস্টম ইভেন্টের ডেটা পাঠানো
MooTools-এ কাস্টম ইভেন্ট তৈরি করার সময় আপনি ইভেন্টের সাথে ডেটাও পাঠাতে পারেন। এই ডেটা কাস্টম ইভেন্টের হ্যান্ডলার দ্বারা গ্রহণ করা যাবে।
নিচে একটি উদাহরণ দেয়া হলো:
// কাস্টম ইভেন্ট তৈরি এবং ডেটা পাঠানো
var customEvent = new Event('myCustomEvent', { data: 'Hello, World!' });
// কাস্টম ইভেন্ট হ্যান্ডল করা
document.id('myElement').addEvent('myCustomEvent', function(e) {
alert('কাস্টম ইভেন্টের ডেটা: ' + e.data);
});
// কাস্টম ইভেন্ট ট্রিগার করা
document.id('myElement').fireEvent('myCustomEvent');
এখানে, myCustomEvent ইভেন্টটির সাথে data: 'Hello, World!' ডেটা পাঠানো হয়েছে এবং ইভেন্ট হ্যান্ডলার এই ডেটা গ্রহণ করে এবং ব্যবহারকারীকে প্রদর্শন করছে।
একাধিক কাস্টম ইভেন্ট হ্যান্ডলার যোগ করা
MooTools-এ আপনি একাধিক ইভেন্ট হ্যান্ডলারও যোগ করতে পারেন, যেগুলো একে অপরের পর পর চলতে থাকে। এই কাজটি addEvent() মেথডের মাধ্যমে করা যায়।
// প্রথম কাস্টম ইভেন্ট হ্যান্ডল করা
document.id('myElement').addEvent('myCustomEvent', function() {
alert('প্রথম হ্যান্ডলার ট্রিগার হয়েছে!');
});
// দ্বিতীয় কাস্টম ইভেন্ট হ্যান্ডল করা
document.id('myElement').addEvent('myCustomEvent', function() {
alert('দ্বিতীয় হ্যান্ডলার ট্রিগার হয়েছে!');
});
// কাস্টম ইভেন্ট ট্রিগার করা
document.id('myElement').fireEvent('myCustomEvent');
এখানে, যখন myCustomEvent ট্রিগার হয়, তখন প্রথম এবং দ্বিতীয় উভয় হ্যান্ডলারই ট্রিগার হবে।
কাস্টম ইভেন্ট রিমুভ করা
MooTools-এ আপনি সহজেই কোনো কাস্টম ইভেন্ট হ্যান্ডলার রিমুভ করতে পারেন। এর জন্য removeEvent() মেথড ব্যবহার করা হয়।
// কাস্টম ইভেন্ট হ্যান্ডলারের রেফারেন্স
var myHandler = function() {
alert('কাস্টম ইভেন্ট ট্রিগার হয়েছে!');
};
// ইভেন্ট হ্যান্ডলার যোগ করা
document.id('myElement').addEvent('myCustomEvent', myHandler);
// কাস্টম ইভেন্ট ট্রিগার করা
document.id('myElement').fireEvent('myCustomEvent');
// কাস্টম ইভেন্ট হ্যান্ডলার রিমুভ করা
document.id('myElement').removeEvent('myCustomEvent', myHandler);
এখানে, myHandler নামে একটি ইভেন্ট হ্যান্ডলার তৈরি করা হয়েছে এবং removeEvent() মেথডের মাধ্যমে এটি রিমুভ করা হয়েছে।
সারাংশ
MooTools-এ কাস্টম ইভেন্ট তৈরি এবং হ্যান্ডল করা খুবই সহজ এবং কার্যকরী। আপনি কাস্টম ইভেন্ট তৈরি করে তা ট্রিগার করতে পারেন, এবং ডেটা সহ ইভেন্ট হ্যান্ডল করতে পারেন। MooTools-এর addEvent(), fireEvent(), এবং removeEvent() মেথডগুলি ব্যবহার করে আপনি ইভেন্টের সঙ্গে ইন্টারঅ্যাক্ট করতে পারেন এবং ওয়েব পেজের ইন্টারঅ্যাকটিভিটি উন্নত করতে পারেন।
Read more
