JavaScript-də yeni elementlərə hadise emalçılarının əlavə edilməsi

Tutaq ki, bizim ul siyahısı və düyməmiz var:

<ul>
	<li>item</li>
	<li>item</li>
	<li>item</li>
	<li>item</li>
	<li>item</li>
</ul>

<button>add</button>

Elementlərimizi uyğun dəyişənlərə əldə edək:

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

Gəlin elə edək ki, hər hansı li üzərində kliklədikdə onun sonuna nida işarəsi əlavə olunsun:

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

Gəlin indi düyməyə basıldıqda siyahının sonuna yeni li əlavə olunsun:

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

Lakin, biz problemlə qarşılaşacıq: yeni əlavə edilmiş li üzərində klik onun sonuna nida işarəsi əlavə edilməsinə səbəb olmayacaq. Məsələ ondadır ki, biz klik əməliyyatçısını yalnız əvvəlcədən mövcud olan li elementlərinə əlavə edirik, lakin yeni olanlara deyil.

Problemi həll edək, yeni li üçün klik emalçısı əlavə edək:

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'item';
	
	item.addEventListener('click', function() { // klik emalçısı
		this.textContent = this.textContent + '!';
	});
	
	list.appendChild(item);
});

Lakin, indi funksiya-emalçının kodu iki yerdə təkrarlanır - ilkin mövcud olan li elementləri və yeniləri üçün. Bunu aradan qaldıraq, onu ayrı bir funksiyaya çıxaraq:

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

Kod təkrarlanmasının qarşısını almaq üçün funksiyamızdan istifadə edək:

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

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

Problem ümumiyyətlə həll olunub və biz funksiya-emalçının kodunun təkrarlanmasının qarşısını aldıq. Lakin, hadisə emalçılarını əlavə etmək bizim üçün hələ də iki yerdə qalır: həm mövcud li elementləri üçün dövrdə, hem də düyməyə kliklədikdə. Növbəti dərsdə bu narahatlıqdan qurtulmağın bir yolunu nəzərdən keçirəcəyik.