Pengoptimuman Pengendali Peristiwa dalam JavaScript

Terlalu banyak pengendali, yang dilekatkan pada elemen, memakan banyak memori RAM dan menyebabkan halaman menjadi lambat.

Mari kita lihat contoh. Katakan kita mempunyai senarai tertentu:

<ul></ul>

Dapatkan rujukan kepada senarai ini dalam pembolehubah:

let ul = document.querySelector('ul');

Sekarang isi senarai kita dengan tag li, dengan melekatkan pengendali klik pada mereka:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
	
	li.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

Hasilnya, kita mempunyai 1000 pengendali. Ini sangat banyak. Untuk pengoptimuman kita boleh melekatkan hanya satu pengendali pada tag ul, dengan menggunakan delegasi peristiwa.

Mari kita lakukan ini. Pertama, hanya buat item senarai:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
}

Dan sekarang laksanakan delegasi pengendali peristiwa:

ul.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		console.log(li.textContent);
	}
});

Buat jadual HTML bersaiz 100 kali 100. Lakukan supaya setiap sel dicat menjadi warna merah apabila diklik.