MooTools-এ ইভেন্ট হ্যান্ডলিং একটি গুরুত্বপূর্ণ ফিচার যা ডেভেলপারদের ওয়েব পেজে ইন্টারঅ্যাকটিভ ফিচার তৈরি করতে সহায়তা করে। MooTools ব্যবহার করে আপনি সহজেই বিভিন্ন ধরনের ইভেন্ট যেমন click, mouseover ইত্যাদি হ্যান্ডল করতে পারেন। এই ইভেন্টগুলো ব্যবহার করে আপনি ইউজার ইন্টারঅ্যাকশন পরিচালনা করতে পারেন এবং ওয়েব পেজে ইন্টারঅ্যাকটিভ ফাংশনালিটি যোগ করতে পারেন।
MooTools-এ ইভেন্ট হ্যান্ডলিং
MooTools-এ ইভেন্ট হ্যান্ডলিং অত্যন্ত সহজ এবং কোডিং করতে কম সময় নেয়। আপনি addEvent মেথড ব্যবহার করে যে কোন HTML এলিমেন্টে ইভেন্ট হ্যান্ডল করতে পারেন।
Click ইভেন্ট হ্যান্ডল করা
click ইভেন্ট হ্যান্ডল করতে MooTools-এর addEvent মেথড ব্যবহার করা হয়। উদাহরণস্বরূপ, একটি বাটন ক্লিক করার পর কিছু কাজ করার জন্য নিচে একটি কোড দেওয়া হলো:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Click Event Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// বাটনে ক্লিক ইভেন্ট হ্যান্ডল করা
$('myButton').addEvent('click', function() {
alert('বাটনটি ক্লিক করা হয়েছে!');
});
});
</script>
</head>
<body>
<button id="myButton">ক্লিক করুন</button>
</body>
</html>
এখানে, domready ইভেন্টটি প্রথমে ওয়েব পেজের DOM তৈরি হওয়া নিশ্চিত করে, তারপর myButton নামক বাটনে click ইভেন্ট অ্যাটাচ করা হয়। যখন বাটনটি ক্লিক হবে, তখন একটি পপ-আপ এলার্ট দেখা যাবে।
Mouseover ইভেন্ট হ্যান্ডল করা
mouseover ইভেন্টও অনেকটা click ইভেন্টের মতো হ্যান্ডল করা হয়। এটি ব্যবহার করে আপনি মাউস পয়েন্টার একটি এলিমেন্টের উপর আসলে কিছু কাজ করতে পারেন, যেমন স্টাইল পরিবর্তন বা অন্য কোন ফিচার অ্যাক্টিভেট করা।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Mouseover Event Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// একটি এলিমেন্টে mouseover ইভেন্ট হ্যান্ডল করা
$('myDiv').addEvent('mouseover', function() {
this.setStyle('background-color', 'yellow');
});
$('myDiv').addEvent('mouseout', function() {
this.setStyle('background-color', 'white');
});
});
</script>
</head>
<body>
<div id="myDiv" style="width: 200px; height: 100px; border: 1px solid black;">
মাউসওভার করুন
</div>
</body>
</html>
এখানে, mouseover ইভেন্টে যখন মাউস পয়েন্টার myDiv নামক ডিভে আসবে, তখন তার ব্যাকগ্রাউন্ড রঙ হলুদ হবে। আর mouseout ইভেন্টে মাউস ডিভ থেকে চলে গেলে ব্যাকগ্রাউন্ড রঙ আবার সাদা হবে।
MooTools-এ অন্যান্য ইভেন্ট হ্যান্ডলিং
MooTools এ শুধু click বা mouseover নয়, আরো অনেক ধরনের ইভেন্ট হ্যান্ডল করা যায় যেমন:
- keydown: কিবোর্ডের কী চাপা হলে ইভেন্ট হয়।
- keyup: কিবোর্ডের কী ছেড়ে দিলে ইভেন্ট হয়।
- focus: একটি ফর্ম ফিল্ডে ফোকাস হলে ইভেন্ট হয়।
- blur: একটি ফর্ম ফিল্ড থেকে ফোকাস চলে গেলে ইভেন্ট হয়।
সারাংশ
MooTools দিয়ে আপনি সহজে বিভিন্ন ধরনের ইভেন্ট হ্যান্ডল করতে পারেন, যেমন click, mouseover, mouseout, ইত্যাদি। এর মাধ্যমে আপনি ওয়েব পেজে ইন্টারঅ্যাকটিভ ফিচার তৈরি করতে পারেন, যা ইউজার এক্সপেরিয়েন্স (UX) উন্নত করে। MooTools-এর addEvent মেথডের মাধ্যমে ইভেন্ট হ্যান্ডলিং খুবই সহজ এবং কার্যকরী।
Read more
