Установка умного обработчика событий

.live()

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

.live(eventType, handler):jQuery1.3

eventType — тип обрабатываемого события. Например "click", "resize" и.т.д. (список всех событий см. ниже).
handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она получает объект события eventObject.

.live(eventType, eventData, handler):jQuery1.4

eventType — см. выше.
eventData — данные, передаваемые обработчику событий. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, ...}.
handler(eventObject) — см. выше.

Замечание 1: начиная с jQuery-1.7, данный метод считается устаревшим. Предпочтительным является методом .on().

Замечание 2: убрать установленный обработчик можно с помощью метода die().

Замечание 3: для правильной работы метода live(), необходимо вызывать его непосредственно после выбора элементов с помощью селектора.
$("div").live("click", foo); - правильно, $("div").next().live("click", foo); - неправильно.

Простой пример:

// Установим обработчик нажатия кнопкой мыши, элементам с классом foo
$('.foo').live('click', function(){
  alert('Вы нажали на элемент "foo"');
});
 
// Теперь, при нажатии на элементы с классом foo будет выведено сообщение. 
// Это будет распространятся как на элементы с классом foo, которые уже были на странице в момент вызова метода, 
// так и на появившиеся после.

Типы событий

Возможными значениями являются события, которые совпадают со стандартными событиями javascript: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, change, select, submit, keydown, keypress, keyup. Метод .bind() обладает более широким набором типов событий.

Вообще, в качестве типа события можно задавать абсолютно любое строковое значение. Если оно не совпадет ни с одним из значений представленных выше, то будет воспринято jQuery как пользовательское событие (т.е. организованное пользователем). Такое событие может быть вызвано лишь самим пользователем, с помощью методов trigger() и triggerHandler().

Установка обработчиков для нескольких типов событий

Чтобы устанавливать один обработчик, сразу для нескольких типов событий, необходимо перечислить эти типы через пробел, например:

$("div.block")live('mouseover mouseout', someHandler)
 
// функция someHandler будет вызываться при возникновении событий типа mouseover и mouseout 
// на div-элементах класса block

Обработчики событий

В функциях, которые вызываются в качестве обработчиков событий, переменная this содержит DOM-объект, на котором было вызвано обрабатываемое событие. Для того что бы получить jQuery-объект из DOM-объекта, необходимо воспользоваться функцией $(): $(this). Это может понадобится для дальнейших манипуляций с объектом, например:

$('#foo').live('click', function() {
  alert($(this).text());
});

в результате, при "клике" по элементу с идентификатором foo, на экран будет выведен содержащийся в нем текст.

Для большинства типов событий действует правило, что если обработчик события возвращает значение false, то обрабатываемое событие отменяется. Например, если обработчик события submit вернет false, то отправка формы будет отменена.

Данные которые получает обработчик

В качестве первого параметра, любой обработчик получает объект, содержащий данные о событии (eventObject). Например, при "клике" по элементу, этот объект, помимо прочего будет содержать координаты курсора: eventObject.pageX и eventObject.pageY.

Кроме этого, существует возможность предоставить обработчику дополнительные данные. Их нужно передавать методу live() в качестве второго параметра (eventData). В обработчике, эти данные будут доступны все в том же объекте eventObject, а точнее в его свойстве eventObject.data:

$('#foo').live('click', {msg:'Spoon!'}, function(eventObject){
  alert(eventObject.data.msg);
});
 
// теперь, при нажатии на элемент с id=foo, на экране будет появляться сообщение Spoon!

Особенности метода

Достоинством метода live(), является то, что установленные обработчики будут вызываться как на текущих элементах страницы, так и на будующих. Это становится возможным благодаря особому устройству метода live(). Вместо того, чтобы привязывать обработчик событий к самим элементам, live() устанавливает его в начало дерева элементов DOM, либо элементу, указанному в роли контекста. Допустим, мы обрабатываем нажатие на div-элемент. Когда случается событие, происходит следующее:

  1. нажатый div-элемент генерирует событие click.
  2. если на этом элементе установлены обработчики, то они будут выполнены, после чего, событие будет передано вверх по иерархии дерева DOM.
  3. пройдя таким образом несколько уровней иерархии, мы дойдем до элемента, которому был присвоен специальный обработчик события, методом live().
  4. этот обработчик проверит, соответствует ли первоначально нажатый элемент селектору, применительно к которому вызывался метод live().
  5. если элемент подходит, то будет вызван соответствующий обработчик.

Чтобы событию не приходилось подниматься до самого начала дерева DOM, можно указать контекст и тогда обработчик будет установлен в его начало, что сократит общее время обработки события:

// если в роли контекста можно указать один элемент, то можно сделать это так:
$('td', $('table')[0]).live('hover', function(){}) // в качестве контекста будет использована первая таблица на странице
 
// или так, в случае, если речь идет о нескольких элементах в роли контекста
$("table").each(function(){
  $("td", this).live("hover", function(){});
});

Если вы решили использовать контекст, наиболее простым будет использование метода delegate().

В действии

С помощью методов live и bind, установим обработчики нажатия кнопки мыши по элементам списка. Кроме этого, сделаем возможным добавлять в список новые элементы. На этом примера хорошо видна разница в работе методов live и bind: при нажатии по любому из первоначальных элементов списка, срабатывать будут оба обработчика. Если же вы добавите новые элементы, то на них будет срабатывать только один обработчик — тот, который был установлен методом live.

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="content-type" content="text/html; charset=utf-8" /~gt~
  ~lt~script src="//code.jquery.com/jquery-1.8.2.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
  Нажми на элементы списка.  
  ~lt~ul~gt~
    ~lt~li~gt~Один~lt~/li~gt~
    ~lt~li~gt~Два~lt~/li~gt~
    ~lt~li~gt~Три~lt~/li~gt~
  ~lt~/ul~gt~
  ~lt~button~gt~Добавить элемент~lt~/button~gt~~lt~br~gt~~lt~br~gt~
  
  ~lt~span~gt~~lt~/span~gt~
  ~lt~script~gt~
    // методом live установим обработчик нажатия мышью по элементу
    $("li").live("click", function(event){
      $("span").append("Нажат элемент списка с обработчиком, установленным методом ~lt~b~gt~live~lt~/b~gt~~lt~br~gt~~lt~br~gt~");
    });
 
    // методом bind установим обработчик нажатия мышью по элементу
    $("li").bind("click", function(event){
      $("span").append("Нажат элемент списка с обработчиком, установленным методом ~lt~b~gt~bind~lt~/b~gt~~lt~br~gt~");
    });

    $("button").bind("click", function(event){
      $("ul").append("~lt~li~gt~Новый~lt~/li~gt~");
    });
 
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • установка умного обработчика событий
  • .live()
  • live()