jQuery-তে ইভেন্ট বাইন্ডিং

প্রায় প্রতিটি JavaScript ইভেন্টেরই একটি নিজস্ব jQuery পদ্ধতি রয়েছে। উদাহরণস্বরূপ, উপাদানগুলিতে ক্লিক এইভাবে ক্যাপচার করা যেতে পারে: $(selector).click(function)।

নিম্নলিখিত HTML কোড বিবেচনা করুন:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

এর জন্য CSS লেখা হয়েছে:

cssli {
  width: 100px;
  cursor: pointer;
}

আসুন এমন করি যাতে যেকোনো li-এ ক্লিক করলে একটি বিস্ময়বোধক চিহ্ন প্রদর্শিত হয়। তালিকার আইটেমগুলিতে ক্লিক করুন:

javascript$('li').click(function() {
  alert('!');
});

বাউন্ড ফাংশনের ভিতরে this উপলব্ধ, যা সেই উপাদানটিকে নির্দেশ করে যেখানে ইভেন্টটি ঘটেছে (আমাদের ক্ষেত্রে সেই li-কে, যেটিতে ক্লিক করা হয়েছিল)। এই this-টি JavaScript শৈলীতে ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ, this.innerHTML বা jQuery শৈলীতে - এর জন্য এই this-টিকে $-তে মোড়ানো উচিত, এভাবে: $(this)।

নিম্নলিখিত HTML কোড নিন:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

এই কোডের জন্য নিম্নলিখিত CSS স্টাইল লেখা হয়েছে:

cssli {
  width: 100px;
}
li:hover {
  color: red;
  cursor: pointer;
}

আসুন এমন করি যাতে li-এ ক্লিক করলে এর শেষে একটি '!' যোগ হয়। কাজ পরীক্ষা করতে তালিকার আইটেমগুলিতে ক্লিক করুন:

javascript$('li').click(function() {
  $(this).append('!');
});