jQuery .bind () vs. .on ()

Я нашел две отличные статьи о новой функции .on() : jquery4u.com , elijahmanor.com .

Есть ли способ, по которому лучше использовать .bind() чем .on() ?

Например, у меня есть пример кода, который выглядит следующим образом:

 $("#container").click( function( e ) {} ) 

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

named #container уже существует, когда моя страница была загружена; не добавляется динамически. Важно отметить, что я использую последнюю версию jQuery: 1.7.2.

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

6 Solutions collect form web for “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 ()

  • Как получить выражение селектора jQuery в виде текста?
  • Селектор jQuery: Id заканчивается?
  • Каков самый быстрый способ выбора элементов-потомков в jQuery?
  • Что такое fastest children () или find () в jQuery?
  • jQuery: выбрать class элемента и идентификатор одновременно?
  • Выделение селектора jQuery
  • jQuery получить все div, которые не имеют атрибута classа
  • jQuery выбирает атрибут с использованием операторов AND и OR
  • Более чистый способ выбора нескольких возможных значений атрибутов?
  • Как я могу выбрать элемент с несколькими classами в jQuery?
  • Выбор индекса jQuery
  • Давайте будем гением компьютера.