В jQuery v1.7 добавлен новый метод on. Из документации:
'Метод .on() присоединяет обработчики событий к выбранному в данный момент набору элементов в объекте jQuery. Начиная с jQuery 1.7, метод .on() предоставляет все функции, необходимые для прикрепления обработчиков событий.
Какая разница с live и bind?
on() - попытка объединить большинство функций привязки событий jQuery в один. У этого есть дополнительный бонус, чтобы убрать неэффективность с помощью live vs delegate. В будущих версиях jQuery эти методы будут удалены, и останется только on и one.
Примеры:
// Using live()
$(".mySelector").live("click", fn);
// Equivalent `on` (there isn't an exact equivalent, but with good reason)
$(document).on("click", ".mySelector", fn);
// Using bind()
$(".mySelector").bind("click", fn);
// Equivalent `on`
$(".mySelector").on("click", fn);
// Using delegate()
$(document.body).delegate(".mySelector", "click", fn);
// Equivalent `on`
$(document.body).on("click", ".mySelector", fn);
Внутри jQuery отображает все эти методы и средства сортировки обработчиков коротких событий методу on(), что указывает на то, что вы должны игнорировать эти методы с этого момента и просто используйте on:
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
См. https://github.com/jquery/jquery/blob/1.7/src/event.js#L965.
on находится в природе, очень близкой к delegate. Так почему бы не использовать делегат? Потому что on не приходит один. там off, чтобы отменить событие и one, чтобы создать событие, которое должно выполняться только один раз. Это новый пакет событий.
Основная проблема live заключается в том, что она прикрепляется к "окну", заставляя событие щелчка (или другое событие) на элементе, глубоко внутри структуры страницы (dom), "всплывать" вверху на странице, чтобы найти обработчик событий, готовый справиться с ним. На каждом уровне все обработчики событий должны быть проверены, это может складываться быстро, если вы делаете глубокую имбрикацию (<body><div><div><div><div><table><table><tbody><tr><td><div><div><div><ul><li><button> etc etc etc...)
Итак, bind, например click, как и другие связующие события ярлыков, прикрепляются непосредственно к цели события. Если у вас есть таблица, скажем, 1000 строк и 100 столбцов, и каждая из 100'000 ячеек включает флажок, который вы хотите обработать. Прикрепление 100'000 обработчиков событий займет много времени при загрузке страницы. Создание одного события на уровне таблицы и использование делегирования событий на несколько порядков более эффективно. Цель события будет восстановлена во время выполнения события. "this" будет таблицей, но "event.target" будет вашим обычным "this" в функции click. Теперь приятная вещь с on заключается в том, что "this" всегда будет целью события, а не контейнером, к которому он присоединен.
с помощью метода .on можно выполнить .live, .delegate и .bind с помощью той же функции, но с .live() возможно только .live() (делегирование событий для документа).
jQuery("#example").bind( "click", fn )= jQuery( "#example").on( "click", fn );
jQuery("#example").delegate( ".examples", "click", fn )= jQuery( "#example" ).on( "click", ".examples", fn )
jQuery("#example").live( fn )= jQuery( document ).on( "click", "#example", fn )
Я могу подтвердить это непосредственно из источника jQuery:
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
jQuery (this.context)? this.context === document в большинстве случаев
(Мое вступительное предложение имело больше смысла, прежде чем вы изменили вопрос. Первоначально вы сказали: "Какая разница с live?" )
on больше похож на delegate, чем он похож на live, это в основном унифицированная форма bind и delegate (на самом деле команда заявила, что ее цель "... для объединения всех способов прикрепления событий к документу..." ).
live в основном on (или delegate), прикрепленный к документу в целом. Он устарел от версии v1.7 в пользу использования on или delegate. В будущем я подозреваю, что мы будем использовать код on исключительно, вместо использования bind или delegate (или live)...
Итак, на практике вы можете:
Используйте on как bind:
/* Old: */ $(".foo").bind("click", handler);
/* New: */ $(".foo").on("click", handler);
Используйте on как delegate (делегирование событий, внедренное в данный элемент):
/* Old: */ $("#container").delegate(".foo", "click", handler);
/* New: */ $("#container").on("click", ".foo", handler);
Используйте on как live (событие делегирования в документе):
/* Old: */ $(".foo").live("click", handler);
/* New: */ $(document).on("click", ".foo", handler);
live - это ярлык для .on() now
//from source http://code.jquery.com/jquery-1.7.js
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
Также этот пост может быть полезен для вас http://blog.jquery.com/2011/11/03/jquery-1-7-released/
В основном случае использования нет. Эти две линии функционально одинаковы
$( '#element' ).bind( 'click', handler );
$( '#element' ).on( 'click', handler );
.on() также может выполнять делегирование событий и является предпочтительным.
.bind() на самом деле является просто псевдонимом для .on(). Здесь определение функции связывания в 1.7.1
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
Идея добавления .on() заключалась в создании единого API событий, вместо того, чтобы иметь несколько функций для привязки события;.on() заменяет .bind(),.live() и .delegate().
Что-то, о чем вам следует знать, если вы хотите получить обработчики событий, связанные с элементом, - обратите внимание на тот элемент, к которому привязан обработчик!
Например, если вы используете:
$('.mySelector').bind('click', fn);
вы получите обработчики событий, используя:
$('.mySelector').data('events');
Но если вы используете:
$('body').on('click', '.mySelector', fn);
вы получите обработчики событий, используя:
$('body').data('events');
(в последнем случае соответствующий объект события будет иметь селектор = ". mySelector" )