.bind()

Начиная с jQuery 3.0, .bind() устарела. Она была заменена методом .on() для привязки обработчиков событий к документу начиная с jQuery 1.7, поэтому её использование уже не рекомендуется. Для более ранних версий метод .bind() используется для привязки обработчика события непосредственно к элементам. Обработчики привязываются к текущим выбранным элементам в объекте jQuery, поэтому эти элементы должны существовать в момент вызова .bind(). Для более гибкой привязки событий см. обсуждение делегирования событий в .on().

Любая строка допустима для eventType; если строка не является именем встроенного события DOM, то обработчик привязывается к пользовательскому событию. Эти события никогда не вызываются браузером, но могут быть инициированы вручную из другого JavaScript-кода с помощью .trigger() или .triggerHandler().

Если строка eventType содержит точку (.) символ, то событие имеет пространство имён. Точка отделяет событие от его пространства имён. Например, в вызове .bind( "click.name", handler ), строка click является типом события, а строка name является пространством имён. Использование пространств имён позволяет отвязывать или инициировать определённые события одного типа без влияния на другие. См. обсуждение .unbind() для получения дополнительной информации.

Некоторые события имеют отдельные страницы, описывающие особенности их использования. Полный список этих событий см. в категории событий.

Когда событие достигает элемента, все обработчики, привязанные к этому типу события для элемента, запускаются. Если зарегистрировано несколько обработчиков, они всегда будут выполняться в том порядке, в котором они были привязаны. После выполнения всех обработчиков событие продолжает свой нормальный путь распространения.

Пример использования .bind():

$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});

Этот код заставит элемент с ID foo реагировать на событие click. При нажатии пользователем внутри этого элемента в дальнейшем будет отображаться сообщение об ошибке.

Множественные события

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

$( "#foo" ).bind( "mouseenter mouseleave", function() {
  $( this ).toggleClass( "entered" );
});

Эффект этого на <div id="foo"> (если у него нет класса "entered") заключается в добавлении класса "entered", когда курсор мыши попадает в <div>, и удалении класса, когда курсор мыши выходит.

Начиная с jQuery 1.4, мы можем привязать несколько обработчиков событий одновременно, передав объект с парами тип события/обработчик:

$( "#foo" ).bind({
  click: function() {
    // Do something on click
  },
  mouseenter: function() {
    // Do something on mouseenter
  }
});

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

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

$( "#foo" ).bind( "click", function() {
  alert( $( this ).text() );
});

После выполнения этого кода, когда пользователь нажмёт внутри элемента с ID foo, его текстовое содержимое будет отображено в диалоговом окне.

Начиная с jQuery 1.4.2, дублированные обработчики событий могут быть привязаны к элементу вместо отбрасывания. Это полезно, когда используется функция передачи данных события, или когда в закрытии вокруг функции обратного вызова события находится другая уникальная информация.

В jQuery 1.4.3 теперь можно передать false вместо обработчика события. Это привяжет обработчик события, эквивалентный function(){ return false; }. Эту функцию можно удалить впоследствии, вызвав .unbind( eventName, false ).

Объект события

Функция обратного вызова handler также может принимать параметры. При вызове функции объект события будет передан первому параметру.

Объект события часто не нужен, а параметр опускается, так как достаточный контекст обычно доступен при привязке обработчика, чтобы точно знать, что нужно сделать при срабатывании обработчика. Однако иногда требуется собрать больше информации об окружающей среде пользователя в момент инициирования события. Посмотреть полный Объект События.

Возврат false из обработчика эквивалентен вызову как .preventDefault(), так и .stopPropagation() для объекта события.

Использование объекта события в обработчике выглядит следующим образом:

$( document ).ready(function() {
  $( "#foo" ).bind( "click", function( event ) {
    alert( "The mouse cursor is at (" +
      event.pageX + ", " + event.pageY +
      ")" );
  });
});

Обратите внимание на добавленный параметр к анонимной функции. Этот код заставит щелчок по элементу с ID foo сообщить координаты курсора мыши на странице в момент щелчка.

Передача данных события

Необязательный параметр eventData обычно не используется. При указании этого аргумента мы можем передать дополнительную информацию обработчику. Одно из удобных применений этого параметра - решение проблем, вызванных замыканиями. Например, предположим, что у нас есть два обработчика событий, которые оба ссылаются на одну и ту же внешнюю переменную:

var message = "Spoon!";
$( "#foo" ).bind( "click", function() {
  alert( message );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", function() {
  alert( message );
});

Поскольку обработчики являются замыканиями, которые оба имеют message в своей среде, оба отобразят сообщение Не в лицо! при срабатывании. Значение переменной изменилось. Чтобы обойти это, мы можем передать сообщение, используя eventData:

var message = "Spoon!";
$( "#foo" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});

На этот раз переменная не ссылается непосредственно внутри обработчиков; вместо этого переменная передаётся по значению через eventData, что устанавливает значение на момент привязки события. Первый обработчик теперь отобразит Ложка!, а второй - Не в лицо!.

Если eventData присутствует, это второй аргумент метода .bind(); если дополнительной информации не нужно отправлять обработчику, то обратный вызов передаётся в качестве второго и последнего аргумента.

Начиная с jQuery 1.4, мы больше не можем прикреплять данные (и, следовательно, события) к элементам object, embed или applet, так как при прикреплении данных к Java-апплетам происходят критические ошибки.

Примечание: Хотя это показано в следующем примере, не рекомендуется привязывать обработчики как к событию click, так и к событию dblclick для одного и того же элемента. Порядок срабатывания событий зависит от браузера, с некоторыми браузерами событие получает два события клика перед dblclick, а с другими - только одно. Чувствительность к двойному щелчку (максимальное время между щелчками, которое распознаётся как двойной щелчок) зависит от операционной системы и браузера, и часто настраивается пользователем.