জাভাস্ক্রিপ্টে নতুন উপাদানে ইভেন্ট হ্যান্ডলার সংযুক্ত করা

ধরুন আমাদের একটি ul তালিকা এবং একটি বাটন আছে:

html<ul>
  <li>আইটেম</li>
  <li>আইটেম</li>
  <li>আইটেম</li>
  <li>আইটেম</li>
  <li>আইটেম</li>
</ul>

<button>যোগ করুন</button>

আমাদের উপাদানগুলি সংশ্লিষ্ট ভেরিয়েবলে পাই:

javascriptlet button = document.querySelector('button');
let list   = document.querySelector('ul');
let items  = list.querySelectorAll('li');

এটি করা যাক যাতে কোন li-এ ক্লিক করলে এর শেষে একটি বিস্ময়বোধক চিহ্ন যুক্ত হয়:

javascriptfor (let item of items) {
  item.addEventListener('click', function() {
    this.textContent = this.textContent + '!';
  });
}

এখন এটি করা যাক যাতে বাটনে ক্লিক করলে তালিকার শেষে একটি নতুন li যোগ হয়:

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'আইটেম';
  list.appendChild(item);
});

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

নতুন li-এ একটি ক্লিক হ্যান্ডলার সংযুক্ত করে সমস্যাটি ঠিক করা যাক:

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'আইটেম';
  
  item.addEventListener('click', function() { // ক্লিক হ্যান্ডলার
    this.textContent = this.textContent + '!';
  });
  
  list.appendChild(item);
});

যাইহোক, এখন হ্যান্ডলার ফাংশনের কোড ডুপ্লিকেট হয় দুই জায়গায় - প্রাথমিকভাবে বিদ্যমান li-এর জন্য এবং নতুনগুলির জন্য। এটি একটি আলাদা ফাংশনে রেখে ঠিক করা যাক:

javascriptfunction handler() {
  this.textContent = this.textContent + '!';
}

কোড ডুপ্লিকেশন এড়াতে আমাদের ফাংশনটি ব্যবহার করা যাক:

javascriptfor (let item of items) {
  item.addEventListener('click', handler);
}

button.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'আইটেম';
  
  item.addEventListener('click', handler);
  
  list.appendChild(item);
});

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