jQuery .bind () so với .on ()

Tôi tìm thấy hai bài viết tuyệt vời nói về chức năng mới .on(): jquery4u.com , elijahmanor.com .

Có cách nào mà .bind()vẫn tốt hơn để sử dụng hơn .on()?

Ví dụ: tôi có một mã mẫu trông như thế này:

$("#container").click( function( e ) {} )

Bạn có thể lưu ý rằng tôi chỉ có một mục được chọn bởi bộ chọn và trong trường hợp của tôi, <div>tên #containerđã tồn tại khi trang của tôi được tải; không được thêm động. Điều quan trọng cần đề cập là tôi sử dụng phiên bản mới nhất của jQuery: 1.7.2.

Đối với mẫu đó, có nên .on()được sử dụng thay vì .bind()ngay cả khi tôi không sử dụng các tính năng khác được cung cấp bởi .on()chức năng?

Trong nội bộ, .bindánh xạ trực tiếp đến .ontrong phiên bản hiện tại của jQuery. (Tương tự như vậy .live.) Vì vậy, có một hiệu suất nhỏ nhưng thực tế không đáng kể nếu bạn sử dụng .bindthay thế.

Tuy nhiên, .bindcó thể bị xóa khỏi các phiên bản trong tương lai bất cứ lúc nào. Không có lý do để tiếp tục sử dụng .bindvà mọi lý do để thích .onthay thế.

Các đoạn này đều thực hiện chính xác cùng một điều:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

Tuy nhiên, chúng rất khác so với những thứ này, tất cả đều thực hiện cùng một điều:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

Nhóm xử lý sự kiện thứ hai sử dụng phân quyền sự kiện và sẽ hoạt động cho các phần tử được thêm động. Trình xử lý sự kiện sử dụng ủy nhiệm cũng hiệu quả hơn nhiều. Bộ đầu tiên sẽ không hoạt động đối với các yếu tố được thêm động và tệ hơn nhiều đối với hiệu suất.

on()Hàm của jQuery không giới thiệu bất kỳ chức năng mới nào chưa tồn tại, nó chỉ là một nỗ lực để chuẩn hóa việc xử lý sự kiện trong jQuery (bạn không còn phải quyết định giữa trực tiếp, liên kết hoặc ủy nhiệm).

Các phương thức trực tiếp và .delegatelà các API ưu việt .onvà không có ý định loại bỏ chúng.

Các phương thức trực tiếp được ưa thích hơn vì mã của bạn sẽ được gõ ít hơn. Bạn sẽ gặp lỗi ngay lập tức khi nhập nhầm tên sự kiện thay vì lỗi im lặng. Theo tôi, nó cũng dễ viết và đọc clickhơnon("click"

Cái .delegatenày vượt trội hơn .onvì thứ tự của đối số:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

Bạn biết ngay nó được ủy quyền bởi vì, tốt, nó nói là đại biểu. Bạn cũng ngay lập tức nhìn thấy bộ chọn.

Với .onđiều đó không rõ ràng ngay cả khi nó được ủy quyền và bạn phải xem phần cuối của bộ chọn:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

Bây giờ, việc đặt tên .bindthực sự khủng khiếp và có giá trị thấp hơn .on. Nhưng .delegatekhông thể thực hiện các sự kiện không được ủy quyền và có những sự kiện không có phương thức trực tiếp, vì vậy trong một trường hợp hiếm hoi như thế này, nó có thể được sử dụng nhưng chỉ vì bạn muốn phân tách rõ ràng giữa các sự kiện được ủy nhiệm và không được ủy quyền.

Nếu bạn nhìn vào mã nguồn, $.fn.bindbạn sẽ thấy rằng đó chỉ là một chức năng viết lại cho on:

function (types, data, fn) {
    return this.on(types, null, data, fn);
}

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

Từ tài liệu jQuery:

Kể từ jQuery 1.7, phương thức .on () là phương thức ưa thích để đính kèm các trình xử lý sự kiện vào tài liệu. Đối với các phiên bản trước, phương thức .bind () được sử dụng để đính kèm một trình xử lý sự kiện trực tiếp vào các phần tử. Trình xử lý được gắn vào các phần tử hiện được chọn trong đối tượng jQuery, vì vậy các phần tử đó phải tồn tại tại thời điểm xảy ra lệnh gọi đến .bind (). Để liên kết sự kiện linh hoạt hơn, hãy xem thảo luận về ủy nhiệm sự kiện trong .on () hoặc .delegate ().

http://api.jquery.com/bind/

Kể từ Jquery 3.0 trở lên .bind đã không được dùng nữa và họ thích sử dụng .on hơn. Như @Blazemonger đã trả lời trước đó rằng nó có thể bị xóa và chắc chắn rằng nó sẽ bị xóa. Đối với các phiên bản cũ .bind cũng sẽ gọi .on trong nội bộ và không có sự khác biệt giữa chúng. Xin vui lòng xem api để biết thêm chi tiết.

Tài liệu API jQuery cho .bind ()