Event delegation nghĩa là gắn một listener duy nhất lên một tổ tiên chung thay vì một listener cho mỗi phần tử con, và dùng event bubbling để xác định con nào thực sự được tương tác (qua event.target).
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
Thư viện câu hỏi phỏng vấn IT với đáp án chi tiết — từ Junior đến Senior.
Ủng hộKhi bạn click một <li>, sự kiện nổi lên (bubble): li → ul → body → document. Một listener trên <ul> do đó nhận được các click từ bất kỳ <li> con nào của nó, và e.target cho bạn biết chính xác phần tử được click. closest("li") đi ngược lên từ target để tìm phần tử mong muốn (xử lý cả các click vào phần tử bên trong).
<li> mới được thêm sau không cần listener mới, vì phần tử cha đã xử lý nó.Nó dựa vào bubbling, nên không hoạt động cho các sự kiện không bubble (focus, blur — dùng focusin/focusout thay thế). Đây chính xác là kỹ thuật mà React dùng nội bộ (một listener gốc cho toàn bộ ứng dụng).