JavaScript-এ লুপে ইভেন্ট হ্যান্ডলার যোগ করা

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

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

ধরা যাক আমাদের একটি ফাংশনও আছে:

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

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

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

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

চলুন আরও এগিয়ে যাই এবং এমন করি যাতে যেকোনো অনুচ্ছেদে ক্লিক করলে সেই অনুচ্ছেদের টেক্সট প্রদর্শিত হয়। তবে, একটি সমস্যা আছে: অনুচ্ছেদ অনেকগুলি, কিন্তু ফাংশন-হ্যান্ডলার একটি। ফাংশন-হ্যান্ডলারের ভিতরে আমরা আমাদের অনুচ্ছেদগুলিকে কিভাবে আলাদা করব?

এক্ষেত্রে this অবজেক্টটি আমাদের সাহায্য করবে - যখন ইভেন্ট ঘটার মুহূর্তে ফাংশনটি কল করা হয়, এই অবজেক্টটি সেই উপাদানটিকে নির্দেশ করবে যেখানে এই ইভেন্টটি ঘটেছে। উপরে বলা অনুযায়ী আমাদের func ফাংশনের কোডটি পরিবর্তন করি:

javascriptfunction func() {
  console.log(this.textContent); // অনুচ্ছেদের টেক্সট প্রদর্শন করি
}

javascriptfunction func() {
  this.value = Number(this.value) + 1;
}