[javascript] jQuery .bind () vs. .on ()



2 Answers

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

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

Question

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

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

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

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

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

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




Если вы посмотрите в исходном коде $.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 3.0 и выше .bind устарел, и они предпочитают использовать .on вместо. Поскольку @Blazemonger ответил ранее, что он может быть удален, и он уверен, что он будет удален. Для более старых версий .bind также вызывается. Внутри, и между ними нет никакой разницы. Также см. Api для более подробной информации.

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




Related