Melampirkan Pengendali kepada Elemen Baharu dalam JavaScript

Katakan kita mempunyai senarai ul dan butang:

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

<button>tambah</button>

Dapatkan elemen kami dalam pembolehubah yang sepadan:

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

Mari kita buat supaya apabila mengklik pada mana-mana li tanda seru ditambahkan pada akhirnya:

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

Sekarang mari kita buat supaya apabila butang ditekan li baharu ditambahkan pada akhir senarai:

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

Walau bagaimanapun, kami akan menghadapi masalah: klik pada li baharu yang ditambahkan tidak akan menyebabkan tanda seru ditambahkan pada akhir. Masalahnya ialah kami melampirkan pengendali klik hanya pada li yang wujud pada asalnya, tetapi bukan pada yang baharu.

Mari betulkan masalah dengan melampirkan pengendali klik pada li baharu:

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

Walau bagaimanapun, kini kod fungsi pengendali diduplikasi di dua tempat - untuk li yang wujud pada asalnya dan untuk yang baharu. Mari betulkan ini dengan mengeluarkannya ke dalam fungsi berasingan:

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

Gunakan fungsi kami untuk mengelakkan penduaan kod:

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

Masalahnya pada dasarnya diselesaikan dan kami mengelakkan penduaan kod fungsi pengendali. Walau bagaimanapun, melampirkan pengendali peristiwa masih perlu dilakukan di dua tempat: dalam gelung untuk li yang sedia ada, dan apabila butang diklik. Dalam pelajaran seterusnya, kami akan membincangkan cara untuk menghilangkan ketidakselesaan ini.