การปรับปรุงประสิทธิภาพตัวจัดการเหตุการณ์ใน JavaScript

ตัวจัดการเหตุการณ์ที่มีจำนวนมากเกินไป ที่ติดตั้งบนองค์ประกอบต่างๆ กิน แรมจำนวนมากและนำไปสู่ การกระตุกของหน้าเว็บ

มาดูตัวอย่างกัน สมมติว่าเรามีรายการบางอย่าง:

<ul></ul>

รับการอ้างอิงไปยังรายการนี้ ลงในตัวแปร:

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

ตอนนี้มาเติมรายการของเราด้วยแท็ก li และติดตั้งตัวจัดการการคลิกให้กับพวกมัน:

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

ผลลัพธ์คือเรามีตัวจัดการถึง 1000 ตัว นี่คือจำนวนที่มาก สำหรับการปรับปรุงประสิทธิภาพ เราสามารถติดตั้งตัวจัดการเพียงตัวเดียว บนแท็ก ul โดยใช้ การมอบหมายเหตุการณ์ (event delegation)

ลองทำดู ขั้นแรก สร้างรายการต่างๆ ขึ้นมา:

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

และตอนนี้ให้ดำเนินการมอบหมายเหตุการณ์ ของตัวจัดการเหตุการณ์:

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

สร้างตาราง HTML ขนาด 100 คูณ 100 ทำให้แต่ละ เซลล์เปลี่ยนเป็นสีแดงเมื่อคลิก