Sự khác nhau giữa jQuery.bind() và jQuery.on() là gì?

Question

Và tại sao .on() bây giờ được ưa thích trong jQuery 1.7?

Answer 1

.on() hiện cung cấp kết hợp .live(), .delegate() và .bind() tất cả trong một phương pháp hợp nhất. Bạn có thể nhận được hành vi của bất kỳ của ba người chỉ bằng cách bạn sử dụng các đối số để .on().

Những cặp có chức năng giống nhau:

// events bound directly to the object they occur on 
$('.button').on('click', fn); 
$('.button').bind('click', fn); 

// events intercepted after bubbling up to a common parent object 
$('.container').on("click", '.button', fn); 
$('.container').delegate('.button', "click", fn); 

Thông tin thêm được mô tả trong một jQuery blog entry.

Trước khi hợp nhất các hàm riêng biệt này, jQuery có nhiều triển khai khác nhau. Hiện tại, .on() là hàm superset và .bind(), .live() và .delegate() tất cả chỉ cần gọi .on() trong quá trình triển khai của chúng để hiện chỉ có một triển khai xử lý sự kiện thực tế. Vì vậy, từ quan điểm đó, nó cũng là một vấn đề làm sạch mã và sắp xếp hợp lý. Tương tự, .die(), .undelegate() và .unbind() chỉ cần gọi .off() bây giờ thay vì có triển khai riêng biệt.

Lưu ý: .live() đã được chấp thuận cho tất cả các phiên bản của jQuery vì nó chỉ là một trường hợp đặc biệt của chặn tất cả các sự kiện sôi sục trên các đối tượng tài liệu vì vậy nó có thể dễ dàng thay thế bằng một trong hai .delegate() hoặc .on() và khi rất nhiều các sự kiện đều là xử lý trên đối tượng tài liệu, nó có thể trở thành một vấn đề hiệu suất kiểm tra rất nhiều bộ chọn trên mọi sự kiện. Sẽ hiệu quả hơn khi móc một sự kiện được ủy nhiệm như thế này vào một phụ huynh chung gần với nơi sự kiện xảy ra hơn là đặt tất cả chúng vào đối tượng tài liệu (do đó tại sao .live() không tốt để sử dụng).

Từ 1,7 nguồn jQuery, bạn có thể thấy tất cả các chức năng này chỉ là bây giờ gọi .on() và .off():

bind: function(types, data, fn) { 
    return this.on(types, null, data, fn); 
}, 
unbind: function(types, fn) { 
    return this.off(types, null, fn); 
}, 

live: function(types, data, fn) { 
    jQuery(this.context).on(types, this.selector, data, fn); 
    return this; 
}, 
die: function(types, fn) { 
    jQuery(this.context).off(types, this.selector || "**", fn); 
    return this; 
}, 

delegate: function(selector, types, data, fn) { 
    return this.on(types, selector, data, fn); 
}, 
undelegate: function(selector, types, fn) { 
    // (namespace) or (selector, types [, fn]) 
    return arguments.length == 1? this.off(selector, "**") : this.off(types, selector, fn); 
}, 

Answer 2

Các phương pháp cũ là một chút lộn xộn - sự khác biệt giữa live(), delegate() và bind() chưa rõ . Bằng cách thực hiện on() chức năng xử lý việc đính kèm bất kỳ sự kiện nào, bất kể sự kiện có tồn tại hay không, nó chỉ dễ dàng hơn để làm việc.

Trước đó, live() chậm hơn rất nhiều so với chức năng on() mới, do đó bạn phải chọn giữa bind() và live().

Answer 3

Sự khác biệt CHÍNH là .bind yêu cầu phần tử (selector) tồn tại vào lúc THỜI GIAN nó được đính kèm, trong khi .on không có yêu cầu đó, và thẳng thắn có cú pháp tốt hơn/thanh lịch hơn trong quan điểm của tôi. Xem tài liệu đầu tiên đoạn http://api.jquery.com/bind/