Какая разница между `on` и` live` или `bind`?

В jQuery v1.7 добавлен новый метод on. Из документации:

'Метод .on() присоединяет обработчики событий к выбранному в данный момент набору элементов в объекте jQuery. Начиная с jQuery 1.7, метод .on() предоставляет все функции, необходимые для прикрепления обработчиков событий.

Какая разница с live и bind?

Ответы

Ответ 1

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.

Ответ 2

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" всегда будет целью события, а не контейнером, к которому он присоединен.

Ответ 3

с помощью метода .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 в большинстве случаев

Ответ 4

(Мое вступительное предложение имело больше смысла, прежде чем вы изменили вопрос. Первоначально вы сказали: "Какая разница с 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);
```

Ответ 5

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/

Ответ 6

В основном случае использования нет. Эти две линии функционально одинаковы

$( '#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().

Ответ 7

Что-то, о чем вам следует знать, если вы хотите получить обработчики событий, связанные с элементом, - обратите внимание на тот элемент, к которому привязан обработчик!

Например, если вы используете:

$('.mySelector').bind('click', fn);

вы получите обработчики событий, используя:

$('.mySelector').data('events');

Но если вы используете:

$('body').on('click', '.mySelector', fn);

вы получите обработчики событий, используя:

$('body').data('events');

(в последнем случае соответствующий объект события будет иметь селектор = ". mySelector" )