Optimasi Penangan Acara di JavaScript

Terlalu banyak penangan acara, yang dipasang pada elemen menghabiskan banyak memori RAM dan menyebabkan halaman menjadi lag.

Mari kita lihat sebuah contoh. Misalkan kita memiliki sebuah daftar:

<ul></ul>

Dapatkan referensi ke daftar ini ke dalam variabel:

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

Sekarang isi daftar kita dengan tag li, dengan memasang penangan 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 memiliki 1000 penangan acara. Ini sangat banyak. Untuk optimasi kita dapat memasang hanya satu penangan pada tag ul, dengan memanfaatkan delegasi acara.

Mari kita lakukan ini. Pertama, cukup buat item daftar:

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

Dan sekarang lakukan delegasi penangan acara:

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

Buat tabel HTML berukuran 100 per 100. Buat agar setiap sel saat diklik diwarnai menjadi merah.