JQuerys.bind() vs..on()

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

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

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

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

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

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

Ответ 1

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

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

Ответ 2

Эти фрагменты выполняются точно так же:

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).

Ответ 3

Прямые методы и .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 не может выполнять не делегированные события и это события, которые не имеют прямого метода, поэтому в редком случае, как это, он может использоваться, но только потому, что вы хотите провести четкое разделение между делегированными и не делегированными событиями.

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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