Инструменты пользователя

Инструменты сайта


js:jquery:bind

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

Довольно много путаницы у разработчиков в том, какие принципиальные различия между методами jQuery .bind() .live() .delegate() и .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 ) {} );

решение

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

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

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

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

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

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

http://habrahabr.ru/qa/22322/

/var/www/source/data/pages/js/jquery/bind.txt · Последнее изменение: 2024/02/05 12:40 (внешнее изменение)