Ủy quyền sự kiện phổ quát trong JavaScript

Đoạn mã được trình bày trong bài học trước thì hoạt động, tuy nhiên, không phải không có thiếu sót. Hãy cùng phân tích những thiếu sót này và viết một giải pháp phổ quát hơn.

Thiếu sót trong mã của chúng ta sẽ thể hiện trong trường hợp, khi bên trong li có các thẻ lồng nhau. Trong trường hợp của chúng ta, giả sử đó là các thẻ i:

<ul>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
</ul>

Trong trường hợp này, nhấp vào thẻ i sẽ dẫn đến việc thêm dấu chấm than vào cuối thẻ i, chứ không phải thẻ li, như chúng ta mong muốn - bởi vì event.target là thẻ mà sự kiện xảy ra chính xác tại đó.

Có thể giải quyết vấn đề bằng phương thức closest:

list.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		li.innerHTML = li.innerHTML + '!';
	}
});

Hãy lặp lại giải pháp đã trình bày.