.live () vs .bind ()

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

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

Обновить:

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 $('
').appendTo('div:last'); 

Я сделал статистический анализ .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) Несколько статических элементов с общим classом с использованием события 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, просмотр с несколькими вкладками, текущие streamи и т. Д.) Будут давать разные результаты. Я использовал это как основное руководство для моего решения использовать одно или другое. Пожалуйста, сообщите, если вы придумали другой результат.

Благодаря!

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

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

ОБНОВИТЬ

Из jQuery :

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

Начиная с 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. Это дает вашим обработчикам событий более элегантную реализацию.