jQuery's .bind() vs..()

Question

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

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

К примеру, у меня есть пример кода, который выглядит примерно так:

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

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

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

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

Answer 5

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

Answer 6

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

jQuery API documentation for .bind()