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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

for (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-এর জন্য লুপে, এবং বাটনে ক্লিক করার সময়। পরবর্তী পাঠে আমরা এই অসুবিধা দূর করার একটি উপায় নিয়ে আলোচনা করব।