.live() vs .bind()

Ответ 1

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

// BIND example
$('div').bind('mouseover', doSomething);
// this new div WILL NOT HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

// LIVE example
$('div').live('mouseover', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

Update:

jQuery 1.7 устарел live() метод и 1.9 удалил его. Если вы хотите достичь той же функциональности с 1.9+, вам нужно использовать новый метод on(), который имеет несколько иной синтаксис, который он вызывает в объекте документа, и селектор передается как параметр. Поэтому код сверху преобразуется в этот новый способ привязки событий, будет выглядеть так:

// ON example
$(document).on('mouseover', 'div', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

Ответ 2

Я сделал статистический анализ .bind() vs .live() vs .delegate() с использованием FF-профилировщика. Я сделал 10 раундов каждого (не достаточный образец, чтобы быть окончательным, но иллюстрирует точку). Это результаты.

1) Единый статический элемент с идентификатором, использующим событие click:

.bind():     Mean = 1.139ms, Variance = 0.1276ms
.live():     Mean = 1.344ms, Variance = 0.2403ms
.delegate(): Mean = 1.290ms, Variance = 0.4417ms

2) Несколько статических элементов с общим классом с использованием события click:

.bind():     Mean = 1.089ms, Variance = 0.1202ms
.live():     Mean = 1.559ms, Variance = 0.1777ms
.delegate(): Mean = 1.397ms, Variance = 0.3146ms

3) Несколько динамических элементов (первая кнопка создает второе...) с помощью события click:

.bind():     Mean = 2.4205ms, Variance = 0.7736ms
.live():     Mean = 2.3667ms, Variance = 0.7667ms
.delegate(): Mean = 2.1901ms, Variance = 0.2838ms

Интерпретируйте, как вы хотите, но мне кажется, что по мере увеличения динамических элементов на странице,.delegate(), кажется, имеет лучшую производительность, а статические элементы лучше всего работают с .bind().

Имейте в виду, что я использую очень простое событие click, вызывающее предупреждение. Различные страницы с различными средами (т.е. CPU, просмотр с несколькими вкладками, текущие потоки и т.д.) Будут давать разные результаты. Я использовал это как основное руководство для моего решения использовать одно или другое. Пожалуйста, сообщите, если вы придумали другой результат.

Спасибо!

Ответ 3

Вы должны использовать .delegate() вместо .live(), где это возможно. Поскольку делегирование событий для .live() всегда нацелено на тело/документ, и вы можете ограничить "пузырь" с .delegate().

См. http://api.jquery.com

UPDATE

Из jQuery:

Как и в jQuery 1.7, .delegate() был заменен методом .on(). Однако для более ранних версий .delegate() остается наиболее эффективным средством для использования делегирования событий.

Ответ 4

Начиная с v1.7,.live,.bind и .delegate все были заменены на .on http://api.jquery.com/on/

Мне было интересно узнать о себе, поэтому я написал статью с некоторыми примерами кода. http://blog.tivix.com/2012/06/29/jquery-event-binding-methods/.

Похоже, что в зависимости от того, как вы вызываете .on(), jquery будет имитировать .bind,.live или .delegate. Это дает вашим обработчикам событий более элегантную реализацию.