Какая разница между jQuery.bind() и jQuery.on()?

Ответ 1

.on() теперь предлагает комбинацию .live(), .delegate() и .bind() всех в одном унифицированном методе. Вы можете получить поведение любого из этих трех, просто используя аргументы в .on().

Эти пары функционально одинаковы:

// 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);

Дополнительная информация описана в записи jQuery.

Прежде чем объединить эти отдельные функции, jQuery имел несколько различных реализаций. Теперь .on() - это функция superset и .bind(), .live() и .delegate() все просто вызывают .on() в своей реализации, поэтому теперь есть только одна реализация фактической обработки событий. Таким образом, с этой точки зрения это была также проблема очистки кода и оптимизации. Аналогично, .die(), .undelegate() и .unbind() просто вызывают .off() вместо того, чтобы иметь отдельные реализации.

Примечание. .live() устарел для всех версий jQuery, потому что это просто особый случай перехвата всех пузырьковых событий на объекте документа, поэтому его можно легко заменить либо .delegate(), либо .on(), и когда лоты событий все обрабатывались на объекте документа, это может стать проблемой производительности, проверяющей множество селекторов на каждом событии. Гораздо эффективнее подключить делегированное событие, подобное этому, к общему родителю, который намного ближе к тому месту, где происходит событие, чем помещать их все в объект документа (таким образом, почему .live() нехорошо использовать).

Из источника jQuery 1.7 вы можете увидеть, как теперь все эти функции вызывают .on() и .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 );
},

Ответ 2

Главное отличие состоит в том, что .bind требует, чтобы элемент (селектор) существовал в TIME, он привязан, тогда как .on не имеет этого требования, и, на мой взгляд, имеет более/более элегантный синтаксис. См. Первый параграф документации http://api.jquery.com/bind/

Ответ 3

Старый метод был немного беспорядочным - разница между live(), delegate() и bind() была неясной. Сделав on() функцию, которая обрабатывает любое событие, независимо от того, существует оно или нет, просто работать с ним.

До сих пор live() был намного медленнее новой функции on(), поэтому вам пришлось выбирать между bind() и live().