जावास्क्रिप्ट में नए एलिमेंट्स पर इवेंट हैंडलर्स जोड़ना

मान लीजिए कि हमारे पास एक सूची 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 के लिए, और बटन पर क्लिक करने पर। अगले पाठ में, हम इस असुविधा से छुटकारा पाने का तरीका समझेंगे।