জেকুয়েরি bind() মেথড
সংজ্ঞা এবং ব্যবহার
নির্বাচিত এলিমেন্টের জন্য bind() মেথড এক বা একাধিক ইভেন্ট হ্যান্ডলার যোগ করে এবং যখন ইভেন্টটি ঘটবে তার জন্য একটি ফাংশন নির্ধারন করে দেয়।
জেকুয়েরি ভার্সন ১.৭ এ, এলিমেন্টে ইভেন্ট হ্যান্ডলার যোগ করতে on() মেথড ব্যবহার করা হয়।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).bind(event,data,function,map)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে bind() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| event | আবশ্যক। এলিমেন্টে যে এক বা একাধিক ইভেন্ট যোগ করা হবে, সেটিকে নির্দেশ করে। একাধিক ইভেন্ট থাকলে তাদেরকে স্পেসের মাধ্যমে আলাদা করতে হয়। ইভেন্টগুলো অবশ্যই ভ্যালিড হতে হবে। |
| data | ঐচ্ছিক। ফাংশনে পাস করার জন্য অতিরিক্ত ডাটা এখানে লিখতে হয়। |
| function | আবশ্যক। ইভেন্ট ঘটলে যে ফাংশনটি রান হবে তা এখানে লিখা হয় |
| map | এলিমেন্টে যোগ করার জন্য এক বা একাধিক ইভেন্ট এবং ফাংশন যা ইভেন্টের পরে ঘটে তার একটি ইভেন্ট ম্যাপ ({event:function, event:function, ...}) নির্দেশ করে। |
bind() মেথড সংক্রান্ত উদাহরণ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").bind("click", function(){
alert("span এলিমেন্টটিতে ক্লিক করা হয়েছে।");
});
});
</script>
</head>
<body>
<span>এখানে ক্লিক করুন!</span>
</body>
</html>
ফলাফল
একের অধিক ইভেন্ট যোগ
নিম্নের উদাহরনে আমরা দেখবো একটি এলিমেন্টে কিভাবে একাধিক ইভেন্ট যোগ করা যায়ঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").bind("mouseover mouseout", function(){
$("span").toggleClass("new_style");
});
});
</script>
<style>
.new_style {
font-size: 150%;
color: red;
}
</style>
</head>
<body>
<span>প্রদত্ত অনুচ্ছেদের উপর আপনার মাউসটি হোভার করুন।</span>
</body>
</html>
ফলাফল
ইভেন্ট ম্যাপের ব্যবহার
নিম্নের উদাহরনে আমরা দেখবো নির্বাচিত এলিমেন্টে এক বা একাধিক ইভেন্ট/ফাংশন যোগ করতে ইভেন্ট ম্যাপ কিভাবে ব্যবহার করতে হয়ঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").bind({
click:function(){$("span").slideToggle();},
mouseover:function(){$("body").css("background-color", "#FFFFFF");},
mouseout:function(){$("body").css("background-color", "#E9E9E4");}
});
});
</script>
</head>
<body>
<span>এটি একটি <div> এলিমেন্ট।</span>
<button>এখানে ক্লিক করুন!</button>
</body>
</html>
ফলাফল
ফাংশনে ডাটা পাস
নিম্নের উদাহরনে আমরা দেখবো একটি ইভেন্ট হ্যান্ডলারে কিভাবে ডাটা পাস করা যায়ঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function msghandler(e){
alert(e.data.messege);
}
$(document).ready(function(){
$("span").bind("click", {messege: "আপনি এই মাত্র আমার মধ্যে ক্লিক করেছেন!"}, msghandler)
});
</script>
</head>
<body>
<span>এখানে ক্লিক করুন!</span>
</body>
</html>
ফলাফল