Ủy quyền sự kiện trong JavaScript

Bài học trước đã mô tả vấn đề phát sinh khi thêm các phần tử mới và đưa ra giải pháp cho nó. Trong bài học này, chúng ta sẽ xem xét một cách tốt hơn để tránh vấn đề - ủy quyền sự kiện. Hãy cùng phân tích nó.

Như bạn đã biết, khi nhấp vào li, chúng ta đồng thời cũng nhấp vào ul. Điều này có thể nhờ sự nổi bọt của sự kiện. Chúng ta có thể sử dụng điều này để giải quyết nhiệm vụ của mình: gắn sự kiện không phải vào mỗi li, mà vào phần tử cha ul của chúng:

list.addEventListener('click', function() {
	
});

Bây giờ trong trình xử lý sự kiện, this sẽ chỉ đến phần tử mà trình xử lý được gắn vào, còn event.target - đến phần tử nơi sự kiện xảy ra:

list.addEventListener('click', function(event) {
	console.log(this);         // danh sách của chúng ta
	console.log(event.target); // mục danh sách
});

Hãy làm sao cho li, nơi xảy ra cú nhấp chuột, được thêm dấu chấm than vào cuối:

list.addEventListener('click', function(event) {
	event.target.textContent = event.target.textContent + '!';
});

Hãy lặp lại giải pháp đã trình bày. Đảm bảo rằng các li mới cũng sẽ phản ứng với cú nhấp chuột.