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

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

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

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

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

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

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

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

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

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

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

একটি লিঙ্ক এবং একটি বাটন দেওয়া আছে। বাটনে ক্লিক করলে লিঙ্কের টেক্সটের শেষে বন্ধনীর মধ্যে তার href অ্যাট্রিবিউটের বিষয়বস্তু যোগ করুন। এমন করুন যে এই যোগ করা শুধুমাত্র প্রথম ক্লিকেই ঘটে।

একটি বাটন দেওয়া আছে, যার মান হল সংখ্যা 1। এমন করুন যাতে এই বাটনে ক্লিক করলে এর মান প্রতিবার এক করে বাড়তে থাকে। বাটনের মান 10-এ পৌঁছানোর পর - ইভেন্ট হ্যান্ডলারটি আনবাইন্ড করুন, যাতে বাটনটি আর ক্লিকে সাড়া না দেয়।