.bind() – устанавливает обработчик события на выбранные элементы страницы.

Имеет три варианта использования:

.bind( eventType [, eventData ], handler )

• eventType – название события. К примеру, “click”, “focusin,” или название собственного события;
• eventData – данные, передаваемые обработчику событий;
• handler – функция, которая будет запускаться каждый раз при наступлении события.

.bind( eventType [, eventData ] [, preventBubble ] )

• eventType – название события. К примеру, “click”, “focusin,” или название собственного события;
• eventData – данные, передаваемые обработчику событий;
• preventBubble – false для отмены выполнения обрабатываемого события. По умолчанию true

.bind( events )

• events – объект с типами события и функции, которая запустится.

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

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

Если строка eventType содержит (.), то событие связано с определённым пространством имён, а данный знак является разделителем.

Например, в .bind( “click.name”, handler ), строка click это тип, а name – пространство имён.

Существуют сокращённые методы браузерных событий, типа .click().

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

Обычное использование метода .bind():

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

Данный код настраивает элемент с id=”foo” реагировать на событие click. В результате, если пользователь кликнет на данный элемент, то выпрыгнет сообщение.

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

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

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

В результате, когда курсор мыши войдет в область элемент с id=”foo”, ему присвоится класс “entered” (предположим, что изначально этого класса у элемента нет), а после того, как  курсор покинет область элемента, класс будет удален.

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

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

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

Параметр handler действует в качестве функции обратного действия. Внутри данной функции ключевое слово this ссылается на элемент, к которому прикреплён обработчик. Например:

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

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

В обоих случая мы увидим сообщение “Not in the face!”, даже если в нашем случае значение переменной меняется. Для того, чтобы логика не была нарушена, передаём 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 );
});