আরিফ
আজ আমি আপনাদের সামনে web page এর একটি বিশেষ element “event” নিয়ে আলোচনা করবো। প্রথমে জেনে নেই ইভেন্ট কি??? সহজ কথায় এটা যেকোন কিছু যা আপনি একটি ওয়েব পেজ এ করে থাকেন। যেমন ধরুন ফেসবুকে মাউসের পয়েন্টার আপনার সেরা সেলিব্রিটির নামের উপর রাখলেন, সাথে সাথে দেখতে পাবেন একটি পপ- আপ বক্স আপনার সামনে আসবে যেখানে সেই সেলিব্রিটির info দেখাবে। তারপর ধরুন আপনি একটি অনলাইন রেডিও স্টেশন এ গান শুনছেন, আপনার মনে হরো ভলিউম বাড়ানো দরকার, আপনি vol+ বাটনে ক্লিক করলেন এক্ষেত্রে ক্লিকটাই event. অর্থাৎ মাউস বলেন কিবোর্ড বলেন যেকোন কি এর জন্য যেকোন এক্টিভিটিই হলো ইভেন্ট। এখন এই যে ইভেন্ট এবং তার এক্টিভিটি কাজ করানোর জন্য আপনার সাংকেতিক চিহ্ন এর প্রয়োজন হবে। আপনার একটি ওয়েব পেজ বানানোর জন্য। সর্বাধিক ব্যবহৃত সংকেত টি হলো
$("p").click();
এবার চলুন আমরা কয়েকটি ইভেন্ট নিয়ে আলোচনা করি:
click:
একটি পাতা সব অনুচ্ছেদ (প্যারা) এর জন্য একটি ক্লিক ইভেন্ট ব্যবহার করার জন্য:
$(“p”).click();
পরবর্তী ধাপে ক্লিক করার ফলে কি ঘটবে তা নির্ধারণ করা হয়। এর জন্য অবশ্যই একটি ফাংশন ব্যবহার করা আবশ্যক:
$("p").click(function(){
// action goes here!!
});
এখানে কিছু DOM ইভেন্ট দেয়া হলো:
| মাউস ইভেন্ট | কীবোর্ড ইভেন্ট | ফরম ইভেন্ট | ডকুমেন্ট/উইন্ডো ইভেন্ট |
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
সাধারণভাবে ব্যবহৃত jQuery Event Methods
click():
click() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ইউজার HTML element টিতে ক্লিক করবেন।
এখানে একটি উদাহরন দেখুন। এই p এর উপর ক্লিক করলে p উধাও হয়ে যাবে:
$(“p”).click(function(){
$(this).hide();
});
এখান থেকে উদাহরন দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
dblclick():
dblclick() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ইউজার HTML element টিতে ডাবল ক্লিক করবেন।
$("p").dblclick(function(){
$(this).hide();
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
mouseenter():
mouseenter() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টার HTML element এর ভিতরে প্রবেশ করবে।
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
mouseleave():
mouseleave() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টার HTML element এর ভিতরে থেকে বের হয়ে যায়।
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
mousedown():
mousedown() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির উপরে থাকবে এবং HTML element এর উপর বাম, ডান বা মিডেল ক্লিক করা হবে,
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
mouseup():
mouseup() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির উপরে থাকবে এবং HTML element এর উপর বাম, ডান বা মিডেল ক্লিক ছেড়ে দেয়া হবে,
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
hover():
hover() method দুইটি ইভেন্ট হ্যান্ডেলার ফাংশন mouseenter() এবং mouseleave() এর সমন্নয়ে HTML element এর সাথে যুক্ত করে।
প্রথম ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির ভিতরে প্রবেশ করবে এবং প্রথম ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির ভিতর থেকে বাহিরে যাবে,
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
focus():
focus() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ফিল্ডটিকে ফোকাস করা হবে,
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
blur():
blur() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ফিল্ডটি থেকে ফোকাস সরিয়ে নেয়া হবে,
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
on():
on() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে।
$("p").on("click", function(){
$(this).hide();
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click", function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
<p> এলিমেন্ট এ একাধিক ইভেন্ট হ্যান্ডেলার ফাংশন যোগ করার উদাহরণ,
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>