on পদ্ধতি

on পদ্ধতি এলিমেন্টে ইভেন্ট হ্যান্ডলার যোগ করতে দেয়। হ্যান্ডলার মুছে ফেলতে off পদ্ধতি ব্যবহার করা যেতে পারে, আর ইভেন্টটি যেন একবার만 কাজ করে এবং তারপর হ্যান্ডলার নিজেই নিজেকে মুছে দেয় তার জন্য one পদ্ধতি ব্যবহার করুন। যেসব এলিমেন্টে আমরা হ্যান্ডলার বাঁধি সেগুলো on কল করার সময় অস্তিত্বশীল থাকতে হবে।

সিনট্যাক্স

এভাবে আমরা এলিমেন্টে ইভেন্ট হ্যান্ডলার যোগ করি, প্রথম প্যারামিটার হিসেবে স্ট্রিং আকারে একটি বা স্পেস দ্বারা আলাদা করা একাধিক ইভেন্ট পাঠানো হয়, দ্বিতীয় প্যারামিটার হিসেবে এলিমেন্টের ভিতরের একটি অতিরিক্ত ফিল্টারিং সিলেক্টর পাঠানো হয়, তৃতীয়টি - অতিরিক্ত ডেটা, যা ইভেন্ট ঘটার সময় হ্যান্ডলারের event.data প্রপার্টিতে পাঠানো হয়। দ্বিতীয় এবং তৃতীয় প্যারামিটার ঐচ্ছিক। চতুর্থ হিসেবে ফাংশন-হ্যান্ডলার পাঠানো হয়, যাতে ইভেন্ট অবজেক্ট এবং ঐচ্ছিক অতিরিক্ত প্যারামিটার পাঠানো হয়। যদি ফাংশন-হ্যান্ডলারের পরিবর্তে false পাঠানো হয়, তাহলে ফাংশনটি শুধু false রিটার্ন করবে:

javascript$(সিলেক্টর).on(ইভেন্টগুলি, [সিলেক্টর], [ডেটা], ফাংশন-হ্যান্ডলার(ইভেন্ট অবজেক্ট, [অতিরিক্ত প্যারামিটার]));

on পদ্ধতি অন্য ভাবেও ব্যবহার করা যেতে পারে, তখন প্রথম প্যারামিটার হিসেবে জাভাস্ক্রিপ্ট অবজেক্ট পাঠানো হয়, যার কীগুলি - ইভেন্টের ধরন, এবং মানগুলি - ইভেন্টের জন্য কল হওয়া ফাংশন-হ্যান্ডলার:

javascript$(সিলেক্টর).on({'ইভেন্টের ধরন': handler}, [সিলেক্টর], [ডেটা]);

যদি আমরা অতিরিক্ত সিলেক্টর না পাঠাই, তবে ইভেন্টটি সেই এলিমেন্টে কাজ করে যাতে আমরা হ্যান্ডলার সংযুক্ত করি, অন্যথায় - সেই এলিমেন্ট-বংশধরে কাজ করে যা এই সিলেক্টরের সাথে মেলে (ডেলিগেটেড ইভেন্ট)। একই ইভেন্ট হ্যান্ডলার একটি এলিমেন্টে একাধিকবার বাঁধা যেতে পারে।

উদাহরণ

আসুন alert-এ, #test সহ প্যারাগ্রাফের টেক্সট দেখাই এটিতে ক্লিক করলে, অন্যান্য প্যারাগ্রাফে ক্লিক করলে কিছুই হবে না:

html<p>টেক্সট১</p>
<p id="test">টেক্সট২</p>
<p>টেক্সট৩</p>

javascript$('#test').on('click', function() {
  alert( $(this).text() );
});

উদাহরণ

আসুন প্যারাগ্রাফে ক্লিক করলে সেই ডেটা দেখাই, যা আমরা on পদ্ধতিতে পাঠিয়েছি। testFunc ফাংশন-হ্যান্ডলারটি ব্যবহার করি, যা আমরা তৈরি করেছি:

html<p>ক্লিক করুন</p>

javascriptfunction testFunc(event) {
  alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

আরও দেখুন