Trong kiến trúc ứng dụng Enterprise, tại sao việc sử dụng Event Delegation lại quan trọng hơn việc gắn trực tiếp Event Handlers vào từng phần tử DOM?

Question

Accepted Answer

Bản chất của Event Delegation
Event Delegation tận dụng cơ chế Event Bubbling trong JavaScript. Thay vì gắn sự kiện cho từng phần tử con (ví dụ: hàng nghìn thẻ ), chúng ta gắn một sự kiện duy nhất cho phần tử cha (ví dụ: thẻ ).
Lợi ích trong dự án Enterprise

Tiết kiệm bộ nhớ (Memory Optimization): Giảm thiểu số lượng đối tượng Event Handler được tạo ra trong bộ nhớ, giúp trình duyệt hoạt động mượt mà hơn.
Dynamic Content Handling: Khi các phần tử con được thêm mới vào DOM thông qua AJAX, chúng sẽ tự động thừa hưởng sự kiện từ phần tử cha mà không cần gắn lại handler.

Ví dụ minh họa
// Cách làm cũ (Không tối ưu)
$('#list li').on('click', function() { /* ... */ });

// Cách làm tối ưu (Event Delegation)
$('#list').on('click', 'li', function() {
    console.log('Phần tử được click:', $(this).text());
});
Lưu ý: Luôn sử dụng selector cụ thể trong tham số thứ hai của phương thức .on() để đảm bảo hiệu năng lọc sự kiện tối ưu nhất.

Trong kiến trúc ứng dụng Enterprise, tại sao việc sử dụng Event Delegation lại quan trọng hơn việc gắn trực tiếp Event Handlers vào từng phần tử DOM?

Bản chất của Event Delegation

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi jquery liên quan cùng chủ đề