jQuery .bind () vs. .on ()

Внутренне, .bind непосредственно сопоставляется с .on в текущей версии jQuery. (То же самое относится и к .live .) Таким образом, есть небольшая, но практически незначительная производительность, если вы используете .bind вместо этого.

Однако .bind может быть удален из будущих версий в любое время. Нет причин продолжать использовать .bind и все основания предпочитать. .on этого.

Эти fragmentы выполняются точно так же:

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

Однако они сильно отличаются от них, и все они выполняют одно и то же:

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

Второй набор обработчиков событий использует делегирование событий и будет работать для динамически добавленных элементов. Обработчики событий, которые используют делегирование, также намного более эффективны. Первый набор не будет работать для динамически добавленных элементов и намного хуже для производительности.

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

Прямые методы и .delegate – это превосходные API-интерфейсы к .on и нет намерения их .on .

Прямые методы предпочтительнее, потому что ваш код будет менее строгим. Вы получите немедленную ошибку, если вы ошибаетесь в имени события, а не в тихой ошибке. На мой взгляд, также легче писать и читать click чем on("click"

Элемент .delegate превосходит. .on за порядка аргумента:

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

Вы сразу поняли, что это делегировано, потому что, говорят, делегат. Вы также сразу видите селектор.

С .on не сразу понятно, если он даже делегирован, и вы должны посмотреть на конец селектора:

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

Теперь, называние .bind действительно ужасно и по номиналу хуже, чем .on . Но .delegate не может выполнять не делегированные события, и есть события, которые не имеют прямого метода, поэтому в редком случае, таком как это, он может использоваться, но только потому, что вы хотите провести четкое разделение между делегированными и не делегированными событиями ,

Если вы посмотрите в исходном коде $.fn.bind вы обнаружите, что это просто функция перезаписи для:

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

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

Из документации jQuery:

Начиная с jQuery 1.7, метод .on () является предпочтительным методом привязки обработчиков событий к документу. Для более ранних версий метод .bind () используется для привязки обработчика события непосредственно к элементам. Обработчики привязаны к выбранным в данный момент элементам в объекте jQuery, поэтому эти элементы должны существовать в точке, где происходит вызов в .bind (). Для более гибкой привязки событий см. Обсуждение делегирования событий в .on () или .delegate ().

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

Начиная с JQuery 3.0 и выше .bind устарел, и они предпочитают использовать .on вместо. Поскольку @Blazemonger ответил ранее, что он может быть удален, и он уверен, что он будет удален. Для более старых версий .bind также вызывается. Внутри, и между ними нет никакой разницы. Также см. Api для более подробной информации.

Документация API jQuery для .bind ()