Tối ưu hóa trình xử lý sự kiện trong JavaScript

Quá nhiều trình xử lý, được gắn vào các phần tử sẽ tiêu tốn nhiều bộ nhớ RAM và dẫn đến trang bị treo.

Hãy xem xét một ví dụ. Giả sử chúng ta có một danh sách nào đó:

<ul></ul>

Lấy tham chiếu đến danh sách này biến:

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

Bây giờ hãy điền danh sách của chúng ta bằng các thẻ li, gắn trình xử lý nhấp chuột vào chúng:

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

Kết quả là chúng ta có 1000 trình xử lý. Điều này là quá nhiều. Để tối ưu hóa, chúng ta có thể chỉ gắn một trình xử lý vào thẻ ul, sử dụng ủy thác sự kiện.

Hãy làm điều đó. Đầu tiên chỉ cần tạo các mục danh sách:

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

Và bây giờ hãy thực hiện ủy thác trình xử lý sự kiện:

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

Tạo một bảng HTML có kích thước 100 nhân 100. Làm sao để mỗi ô khi nhấp chuột đều được tô màu đỏ.