.bind()

Начиная с jQuery 3.0, .bind() объявлен устаревшим. Начиная с jQuery 1.7 для привязки обработчиков событий к документу вместо него используется метод .on(), поэтому его применение уже не рекомендовалось. В более ранних версиях метод .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.'" );
});

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

Несколько событий

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

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

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

Начиная с 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() );
});

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

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

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

Объект Event

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

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

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

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

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

Обратите внимание на параметр, добавленный в анонимную функцию. Этот код заставит щелчок по элементу с идентификатором 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, а другие — только одно. Чувствительность к двойному щелчку (максимальное время между щелчками, при котором они распознаются как двойной щелчок) может различаться в разных операционных системах и браузерах и часто настраивается пользователем.