JavaScript-dä täze elementlere işleýji gereklemek

Bizde bir sanaw ul we bir düwme bolsun:

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

<button>goş</button>

Elementlerimizi degişli üýtgeýjänlere alýarys:

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

Her bir li-e basylanynda, onyň ahyryna ýarym sada goşulýandyk etdiriň:

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

Indi düwmä basylanynda, sanawyň ahyryna täze li goşulýandyk etdiriň:

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

Emma, bir meselä duşarys: täze goşulan li-e basmak, ahyryna ýarym sada goşmaz. Sebäbi, biz wakalar işleýjisini diňe başdan bar bolan li-lere gerekledik, ýöne täzelerine däl.

Meseläni düzeliň, täze li-e basmak işleýjisini gereklemek bilen:

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'element';
	
	item.addEventListener('click', function() { // basmak işleýjisi
		this.textContent = this.textContent + '!';
	});
	
	list.appendChild(item);
});

Emma, indi işleýji funksiýanyň kody iki ýerde gaýtalanyp ýatyryldy - başdan bar bolan li-ler we täzeleri üçin. Ony aýry bir funksiýa çykaryp düzeliň:

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

Kod gaýtalamagyň öňüni almak üçin funksiýamyzy ulanyň:

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);
});

Mesele umumy taýdan çözüldi we biz işleýji funksiýanyň koduny gaýtalamagyň öňüni aldyk. Emma, wakalar işleýjilerini gereklemek hâlâ iki ýerde gerekli: bar bolan li-ler üçin aýlawda we düwmä basylanynda. Indiki sapakda bu ýaramazlykdan halas boluň usulyny seredýäris.