it-swarm.com.ru

.bind () в jQuery против .on ()

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

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

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

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

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

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

193
Samuel

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

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

300
Blazemonger

Все эти фрагменты выполняют одно и то же:

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 () { ... });

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

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

53
jbabey

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

10
Esailija

Если вы посмотрите в исходном коде $.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

8
andlrc

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

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

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

6
Faust

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

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

3
userG