জাভাস্ক্রিপ্টে লুপে ইভেন্ট হ্যান্ডারগুলি আনবাইন্ড করা

এখন ধরুন আমাদের কাছে একটি উপাদান নেই, বরং বেশ কয়েকটি আছে। উদাহরণস্বরূপ, বেশ কয়েকটি অনুচ্ছেদ:

<p>text1</p>
<p>text2</p>
<p>text3</p>

আসুন এই প্রতিটি অনুচ্ছেদে ক্লিক হ্যান্ডার হিসেবে ফাংশন func সংযুক্ত করি:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
}

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

আপনি ইতিমধ্যেই জানেন, যে উপাদানে ইভেন্টটি ঘটেছে তা ফাংশন-হ্যান্ডারের মধ্যে this এর মাধ্যমে পাওয়া যাবে। এর মানে হল this থেকে হ্যান্ডারটি আনবাইন্ড করতে হবে, এভাবে:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // হ্যান্ডারটি আনবাইন্ড করছি
}

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