Я нашел две замечательные статьи о новой функции .on(): jquery4u.com, elijahmanor.com.
Есть ли способ, которым .bind() лучше использовать, чем .on()?
Например, у меня есть пример кода, который выглядит следующим образом:
$("#container").click( function( e ) {} )
Вы можете заметить, что у меня только один элемент, полученный селектором, и в моем случае <div> с именем #container уже существует, когда моя страница загружена; не добавляется динамически. Важно отметить, что я использую последнюю версию jQuery: 1.7.2.
Для этого образца следует использовать .on() вместо .bind(), даже если я не использую другие функции, предоставляемые функцией .on()?
Внутренне, .bind отображается непосредственно в .on в текущей версии jQuery. (То же самое относится и к .live.) Таким образом, есть небольшая, но практически незначительная производительность, если вы используете .bind вместо этого.
Однако .bind можно удалить из будущих версий в любое время. Нет причин продолжать использовать .bind и все причины предпочитать .on вместо этого.
Эти фрагменты выполняются точно так же:
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, и нет намерения их обесценивать.
Прямые методы предпочтительнее, потому что ваш код будет менее строгим. Вы получите немедленную ошибку, если вы
имя события, а не тихую ошибку. На мой взгляд, также легче писать и читать 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, вы обнаружите, что это просто функция перезаписи для on:
function (types, data, fn) {
return this.on(types, null, data, fn);
}
Из документации jQuery:
Как и в jQuery 1.7, метод .on() является предпочтительным методом привязки обработчиков событий к документу. Для более ранних версий метод .bind() используется для привязки обработчика события непосредственно к элементам. Обработчики привязаны к выбранным в данный момент элементам в объекте jQuery, поэтому эти элементы должны существовать в точке, где происходит вызов в .bind(). Для более гибкой привязки событий см. Обсуждение делегирования событий в .on() или .delegate().
По состоянию на JQuery 3.0 и выше .bind устарел, и они предпочитают использовать .on вместо. Поскольку @Blazemonger ответил ранее, что он может быть удален, и он уверен, что он будет удален. Для более старых версий .bind также вызывается. Внутри, и между ними нет никакой разницы. Также см. Api для более подробной информации.