Trong jQuery, sự khác biệt cốt lõi giữa phương thức .bind() và .on() là gì, và tại sao phiên bản jQuery hiện đại lại khuyên dùng .on() cho mọi trường hợp gắn sự kiện?

Question

Accepted Answer

Phân tích bản chất

Phương thức .bind(): Đây là cách cũ để gắn sự kiện vào các phần tử khớp với selector tại thời điểm gọi phương thức. Dưới mui xe, nó gọi trực tiếp phương thức .addEventListener() của DOM (hoặc attachEvent cho IE cũ) lên từng phần tử được tìm thấy.
Phương thức .on(): Được giới thiệu từ jQuery 1.7 nhằm thống nhất tất cả các API gắn sự kiện (.bind(), .live(), .delegate()). Nó không chỉ gắn sự kiện trực tiếp mà còn hỗ trợ mạnh mẽ cơ chế Event Delegation (ủy quyền sự kiện).

Lý do nên dùng .on()

Hiệu năng và Quản lý bộ nhớ: Với .on(), bạn có thể gắn sự kiện cho một phần tử cha (ví dụ: document hoặc một container) để lắng nghe sự kiện từ các phần tử con (kể cả các phần tử con được sinh ra sau đó trong tương lai). Điều này tránh việc phải lặp qua hàng ngàn phần tử để gắn sự kiện riêng lẻ.
Tính linh hoạt: Hỗ trợ gắn nhiều sự kiện cùng lúc với namespace (ví dụ: .on('click.myNamespace', handler)).
Đồng nhất API: Thay vì nhớ nhiều hàm khác nhau, .on() đáp ứng mọi nhu cầu từ gắn sự kiện trực tiếp đến ủy quyền.

Ví dụ minh họa
// Sử dụng .bind() - Không hỗ trợ phần tử sinh ra sau
$('#myButton').bind('click', function() {
    alert('Clicked');
});

// Sử dụng .on() với Event Delegation - Tối ưu cho phần tử động
$('#parentContainer').on('click', '.dynamicButton', function() {
    alert('Dynamic button clicked');
});
Lưu ý thực chiến
Ở cấp độ Junior, bạn cần từ bỏ thói quen sử dụng .bind() hay .click() trực tiếp cho các danh sách động (như bảng dữ liệu, danh sách sản phẩm load bằng AJAX). Hãy luôn dùng .on() kết hợp với selector con để đảm bảo hiệu năng và không bị sót sự kiện.