javascript context - jQuery.bind()vs..on()




live addeventlistener (6)

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

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

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

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

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

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


Answers

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

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/


Внутренне, .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).


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

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


вы можете использовать

$('.buttons').on('click', 'button', function(){
    // your magic goes here
});

или же

$('.buttons').delegate('button', 'click', function() {
    // your magic goes here
});

эти два метода эквивалентны, но имеют другой порядок параметров.

см. событие jQuery Delegate





javascript jquery jquery-selectors