JavaScriptda yangi elementlarga ishlovchi qo‘shish

Faraz qilaylik, bizda ul ro‘yxati va tugma mavjud:

<ul>
	<li>element</li>
	<li>element</li>
	<li>element</li>
	<li>element</li>
	<li>element</li>
</ul>

<button>qo‘shish</button>

Elementlarimizni mos o‘zgaruvchilarga olaylik:

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

Keling, har qanday li ustiga bosilganda uning oxiriga undov belgisi qo‘shilsin:

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

Keling, endi tugma bosilganda ro‘yxat oxiriga yangi li qo‘shilsin:

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'element';
	list.appendChild(item);
});

Biroq, biz muammoga duch kelamiz: yangi qo‘shilgan li ustiga bosilganda uning oxiriga undov belgisi qo‘shilmaydi. Buning sababi, biz bosish hodisasi ishlovchisini faqat dastlab mavjud bo‘lgan li elementlariga qo‘shdik, lekin yangi elementlarga emas.

Muammoni hal qilaylik, yangi li elementiga bosish ishlovchisini qo‘shib:

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'element';
	
	item.addEventListener('click', function() { // bosish ishlovchisi
		this.textContent = this.textContent + '!';
	});
	
	list.appendChild(item);
});

Biroq, endi ishlovchi funksiya kodi ikki joyda takrorlanmoqda - dastlab mavjud bo‘lgan li elementlari va yangilari uchun. Buni alohida funksiyaga chiqarib hal qilaylik:

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

Kod takrorlanishining oldini olish uchun funksiyamizdan foydalanamiz:

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

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'element';
	
	item.addEventListener('click', handler);
	
	list.appendChild(item);
});

Umuman olganda, muammo hal qilindi va biz ishlovchi funksiya kodining takrorlanishining oldini oldik. Biroq, hodisalar ishlovchilarini qo‘shish baribir ikki joyda qilinishi kerak: ham mavjud li elementlari uchun sikl ichida, ham tugma bosilganda. Keyingi darsda biz bu noqulaylikdan qochish usulini ko‘rib chiqamiz.