JavaScript-এ ইভেন্ট আনবাইন্ডিং

এই পাঠে, আমরা শিখব如何 ইভেন্ট হ্যান্ডলারগুলি আনবাইন্ড করতে যেগুলি আগে আমাদের দ্বারা উপাদানগুলির সাথে বাঁধা ছিল। উদাহরণস্বরূপ, নিম্নলিখিত বাটনটি দেওয়া আছে:

html<input id="button" type="submit">

আসুন এই বাটনে func ফাংশনটি বাঁধি:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
}

এখন আসুন এমন করি যাতে ইভেন্ট হ্যান্ডলার প্রথম ক্লিকে কাজ করে, এবং তারপর বাটন থেকে আনবাইন্ড হয়ে যায়। এর জন্য রয়েছে বিশেষ পদ্ধতি removeEventListener। এই পদ্ধতিটি প্রথম প্যারামিটার হিসাবে ইভেন্টের ধরন নেয়, এবং দ্বিতীয়টি - সেই ফাংশনের রেফারেন্স যা আনবাইন্ড করতে হবে।

সাধারণত, এর মানে হল যে ইভেন্ট হ্যান্ডলার ঠিক সেইভাবেই আনবাইন্ড হয় যেভাবে তা বাঁধা ছিল। অর্থাৎ, যদি আমরা এটিকে এভাবে বেঁধে থাকি: addEventListener('click', func), তাহলে একই প্যারামিটার দিয়েই আনবাইন্ড করব, এভাবে: removeEventListener('click', func)।

সুতরাং, আসুন আমরা আমাদের সামনে রাখা কাজটি সমাধান করি:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
  this.removeEventListener('click', func);
}