জেকুয়েরি event.delegateTarget প্রোপার্টি
<div> এলিমেন্টের ব্যাকগ্রাউন্ড কালার পরিবর্তন (<button> এলিমেন্টের উত্তরসূরী):
সংজ্ঞা এবং ব্যবহার
যে এলিমেন্টে জেকুয়েরি ইভেন্ট হ্যান্ডলার যোগ করা হয়েছে, event.delegateTarget প্রোপার্টি সেই এলিমেন্টকে রিটার্ন করে।
এই প্রোপার্টিটি on() মেথডের দ্বারা অর্পিত ইভেন্টকে যোগ করতে অনেক গুরুত্বপূর্ণ, যেখানে ইভেন্ট হ্যান্ডলারটি ঐ এলিমেন্টের পূর্বের এলিমেন্টে যোগ করা হয়।
টিপস:event.delegateTarget এবং event.currentTarget একই রকমের, যদি একটি এলিমেন্টের মধ্যে ইভেন্টটি সীমাবদ্ধ থাকে তবে কোন ডেলিগেশন ঘটবে না (নিচের উদাহরণে দেখি)।
সিনট্যাক্স ও ব্যাখ্যা
event.delegateTarget
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে event.delegateTarget প্রোপার্টি ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারমিটার | বিবরণ |
|---|---|
| event | আবশ্যক। ইভেন্ট বাইন্ডিং ফাংশন থেকে event প্যারামিটারটি এসেছে। |
event.delegateTarget প্রোপার্টি সংক্রান্ত উদাহরণ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").on("click", "button", function(event){
$(event.delegateTarget).css("background-color", "red");
});
});
</script>
</head>
<body>
<div style="background-color:green">
<p>এই div ব্যাকগ্রাউন্ড কালার পরিবর্তন করার জন্য বাটনে ক্লিক করুন।</p>
<button>ক্লিক করুন!</button>
</div>
<div style="background-color:yellow">
<p>এই div ব্যাকগ্রাউন্ড কালার পরিবর্তন করার জন্য বাটনে ক্লিক করুন।</p>
<button>ক্লিক করুন!</button>
</div>
</body>
</html>
ফলাফল
delegateTarget এবং currentTarget এর মধ্যে ডেলিগেশনের ক্ষেত্রে পার্থক্য
ডেলিগেশনের ক্ষেত্রে delegateTarget এবং currentTarget এর মধ্যে পার্থক্য দেখানো হলো।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").on("click", "button", function(event){
alert("delegateTarget ডেটা রিটার্ন করেঃ " + event.delegateTarget.nodeName +
"\ncurrentTarget ডেটা রিটার্ন করেঃ " + event.currentTarget.nodeName);
});
});
</script>
</head>
<body>
<button>SdelegateTarget এবং currentTarget এই দুইয়ের মধ্যে পার্থক্য যখন ডেলিগ্রেশন ঘটে</button>
</body>
</html>
ফলাফল
delegateTarget এবং currentTarget সরাসরি ইভেন্ট যোগ করার ক্ষেত্রে একই রকম
delegateTarget এবং currentTarget সরাসরি ইভেন্ট যোগ করার ক্ষেত্রে একই রকম তা দেখানো হলো।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").on("click", function(event){
alert("delegateTarget ডেটা রিটার্ন করেঃ " + event.delegateTarget.nodeName +
"\ncurrentTarget ডেটা রিটার্ন করেঃ " + event.currentTarget.nodeName);
});
});
</script>
</head>
<body>
<button>সরাসরি ইভেন্ট বন্ডের ক্ষেত্রে delegateTarget এবং currentTarget এই দুইয়ের মান সমান হয়</button>
</body>
</html>
ফলাফল