Какая разница между jQuery .bind() .live() .delegate() и .on()?

Question

[ChillyProud]

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



Можете подробно рассказать?

Comments

[ChillyProud]

После небольшого ресерча, применение on():

/* Методы jQuery .bind(), .live(), и .delegate() пишутся с использованием введеного в jQuery 1.7 метода .on() */

// Bind
$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} ); 

// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

Answer 1

[zimorodok]

bind — навешивает обработчик непосредственно на элемент (когда тот есть в DOM-е). При удалении элемента так-же удаляется.

live — навешивает обработчик на document, используется делегирование (всплытие событий). Позволяет создать обработчик до того, как элемент появится в DOM-е. При удалении элумента обработчик не удаляется, а просто перестает срабатывать. Если в DOM снова вставить элемент, подходящий под селектор, обработчик снова отработает.

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

on — объединяет возможности как bind, так и delegate (зависит от формы использования). Как верно было замечено, остальные методы deprecated и в новых версиях поддерживаться не будут. Елиный метод введен для того, чтобы не возникали вопросы какой метод использовать.

Answer 2

[Константин Китманов]

Сейчас стоит использовать только .on — все остальное будет потихоньку переходить в deprecated.
Отличие .bind от всех остальных в том, что он слушает события напрямую на элементе, тогда как все остальные подразумевают перехват и обработку всплывающих по DOM-дереву событий (т.н. «делегирование событий»).

Comments

[Константин Китманов]

При этом .live может использоваться как и для делегированных событий (в формате .on(events, selector, handler)), так и для прямого «слушания» событий (.on(events, handler))

Answer 3

[theaspin]

Внимательно читаем документацию: с версии 1.7 рекомендуется использовать только on(). Остальные методы — обертки для on() с разными параметрами.

Answer 4

[Eugene]

www.quirksmode.org/js/events_order.html

Answer 5

[Илья Плотников]

Live можно сразу забыть, т.к. он находится в категории deprecated.

Comments

[Илья Плотников]

Простите, невнимательно читал комментарии

[Алексей Карунос]

4 дня назад был комит, который удалил live() и die().