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

Я нашел две замечательные статьи, рассказывающие о новой функции .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 () { ... });

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

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

Прямые методы и .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);
}

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 также будет вызывать .on внутри, и между ними нет никакой разницы. Пожалуйста, смотрите API для более подробной информации.

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