জেকুয়েরি on() মেথড
সংজ্ঞা এবং ব্যবহার
- নির্বাচিত এলিমেন্ট অথবা চাইল্ড এলিমেন্টে এক বা একাধিক ইভেন্ট হ্যান্ডলার যোগ করতে on() মেথড ব্যবহার করা হয়।
- জেকুয়েরি ভার্সন ১.৭ এ, bind(), live() এবং delegate() মেথডের পরিবর্তে on() মেথডের ব্যবহার শুরু হয়।
- নোট: on() মেথডের সাহায্যে যুক্ত ইভেন্ট হ্যান্ডলার চলতি এবং পরবর্তীতে তৈরি এলিমেন্টের জন্যও কাজ করে।
- নোট: on() মেথডের সাহায্যে যুক্ত ইভেন্ট হ্যান্ডলার চলতি এবং পরবর্তীতে তৈরি এলিমেন্টের জন্যও কাজ করে।
- নোট: on() মেথডের সাহায্যে যুক্ত ইভেন্ট হ্যান্ডলার চলতি এবং পরবর্তীতে তৈরি এলিমেন্টের জন্যও কাজ করে।
- টিপস: ইভেন্ট হ্যান্ডলার বাদ দিতে off() মেথড ব্যবহার করুন।
- টিপস: যদি এমন ইভেন্ট দরকার হয় যেটা শুধুমাত্র একবারই রান হবে তাহলে one() ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).on(event,childSelector,data,function,map)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে on() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| event | আবশ্যক। নির্বাচিত এলিমেন্টে যোগ করার জন্য এক বা একাধিক ইভেন্ট অথবা নেমস্পেস নির্দেশ করে। একাধিক ইভেন্ট ভ্যালু স্পেসের মাধ্যমে আলাদা করা হয়। অবশ্যই ভ্যালিড ইভেন্ট হতে হবে। |
| childSelector | ঐচ্ছিক। নির্দিষ্ট চাইল্ড এলিমেন্টেই শুধুমাত্র ইভেন্ট হ্যান্ডলার যুক্ত হবে তা নির্দেশ করে। |
| data | ঐচ্ছিক। ফাংশনের সাথে অতিরিক্ত ডাটা পাস করতে নির্দেশ করা হয়। |
| function | আবশ্যক। ইভেন্ট ঘটলে যে ফাংশনকে রান হবে সেটিকে নির্দেশ করে। |
| map | নির্বাচিত এলিমেন্টে একাধিক ইভেন্ট এবং ফাংশন যোগ করার জন্য একটি ম্যাপকে ({event:function, event:function, ...}) নির্দেশ করে |
on()মেথড সংক্রান্ত উদাহরণ
কিভাবে <p> এলিমেন্টে একটি ক্লিক ইভেন্ট যোগ করা হয় তা নিচের উদাহরনে দেখনো হলো
উদাহরণঃ
<!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(){
$("p").on("click", function(){
alert("প্যারাগ্রাফে ক্লিক করা হয়েছে।");
});
});
</script>
</head>
<body>
<p>এই প্যারাগ্রাফে ক্লিক করুন</p>
</body>
</html>
ফলাফল
bind() থেকে on() মেথড
কিভাবে on() মেথড ব্যবহার করে bind() মেথডের মত একই কাজ করানো যাবে নিচের উদাহরনে তা দেখানো হলো
উদাহরণঃ
<!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(){
$("#div1").on("click", function(){
$(this).css("background-color", "aqua");
});
$("#div2").bind("click", function(){
$(this).css("background-color", "aqua");
});
});
</script>
</head>
<body>
<h4 style="color:green;">এই উদাহরণে on() এবং bind() কিভাবে কাজ করে তার ইফেক্ট দেখানো হয়েছে।</h4>
<div id="div1" style="border:1px solid black;">কিছু লেখা।
<p> <b>on() মেথড</b>এর ব্যাকগ্রাউন্ড-কালার সেট করতে ক্লিক করুন।</p>
</div><br>
<div id="div2" style="border:1px solid black;">কিছু লেখা।
<p><b>bind() মেথড</b>এর ব্যাকগ্রাউন্ড-কালার সেট করতে ক্লিক করুন।</p>
</div>
</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(){
$("p").on("mouseover mouseout", function(){
$(this).toggleClass("intro");
});
});
</script>
<style>
.intro {
font-size: 150%;
color: green;
}
</style>
</head>
<body>
<p>মাউস পয়েন্টারটি প্যারাগ্রাফের উপরে নিন।</p>
</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(){
$("p").on({
mouseover: function(){
$("body").css("background-color", "aqua");
},
mouseout: function(){
$("body").css("background-color", "green");
},
click: function(){
$("body").css("background-color", "red");
}
});
});
</script>
</head>
<body>
<p>প্যারাগ্রাফের উপর মাউসের পয়েন্টার নিয়ে আসুন অথবা ক্লিক করুন।</p>
</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 handlerName(event) {
alert(event.data.msg);
}
$(document).ready(function(){
$("p").on("click", {msg: "আপনি মাত্র আমাকে ক্লিক করেছেন!"}, handlerName)
});
</script>
</head>
<body>
<p>ক্লিক করুন!</p>
</body>
</html>
ফলাফল
পরবর্তীতে তৈরি এলিমেন্টের জন্য ইভেন্ট হ্যান্ডলার যুক্ত করা
কিভাবে on() মেথডের সাহায্যে পরবর্তীতে তৈরি এলিমেন্টেও ইভেন্ট হ্যান্ডলার যোগ করা যায় তা তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ
<!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(){
$("div").on("click", "p", function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>এটি একটি নতুন প্যারাগ্রাফ।</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<div style="background-color:aqua">
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি সহ যেকোন p এলিমেন্টকে অদৃশ্য করার জন্য যেকোন p এলিমেন্টে ক্লিক করুন।</p>
<button>এই বাটনটির পর একটি নতুন p এলিমেন্ট অন্তর্ভূক্ত করুন</button>
</div>
</body>
</html>
ফলাফল
একটি ইভেন্ট হ্যান্ডলার বাদ দেওয়া
কিভাবে off() মেথড ব্যবহার করে একটি ইভেন্ট হ্যান্ডলার বাদ দেওয়া যায় তা নিচের উদাহরনে দেখানো হলোঃ
উদাহরণঃ
<!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(){
$("p").on("click", function(){
$(this).css("background-color", "aqua");
});
$("button").click(function(){
$("p").off("click");
});
});
</script>
</head>
<body>
<p> ব্যাকগ্রাউন্ড-কালার সেট করতে অনুচ্ছেদে ক্লিক করুন। </p>
<p>নিচের বাটনে ক্লিক করুন এবং তারপর এই অনুচ্ছেদের উপর ক্লিক করুন।( যখন ক্লিক ইভেন্ট মুছে ফেলা হবে)।</p>
<button> ইভেন্ট হ্যান্ডলারটি মুছে ফেলতে ক্লিক করুন।</button>
</body>
</html>
ফলাফল