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

.bind()

Устанавливает обработчик события на выбранные элементы страницы. Имеет три варианта использования:

.bind(eventType, [eventData], handler(eventObject)):jQuery1.0

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

.bind(eventType, [eventData], false):jQuery1.4.3

указав в качестве третьего аргумента false, вы отмените выполнение обрабатываемого события. Это эквивалентно установке в качестве обработчика такой функции: function(){return false;}

eventType — см. выше.
eventData — см. выше..

.bind(events):jQuery1.4

позволяет установить обработчики, сразу на несколько событий.

events — набор пар вида тип события:обработчик. Он должен быть представлен в форме объекта, в формате: {type1:handler1, type2:handler2, ...}.

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

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

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

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

Типы событий

Возможные значения: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error. Для каждого из этих типов существует одноименный метод, являющейся краткой формой метода bind() (см. список). К примеру, использование click(handler) равнозначно bind("click", handler).

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

Тип событий может быть задан с указанием пространства имен, например: bind('click.name', handler). Здесь name является пространством имен, а click это тип событий. Пространство имен позволяет разделить обработчики одних и тех же событий на подгруппы, которые, в последствии, будет легко отдельно вызывать (методом trigger()) и удалять (методом unbind()).

Установка обработчиков нескольким событиям

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

bind('mouseenter mouseleave', someHandler)


Для того, чтобы обеспечить несколько событий отдельными обработчиками, используйте второй вариант функции bind(). Например:

$('#foo').bind({
  click: function() {
    // действия в ответ на "клик" по элементу с идентификатором foo
  },
  mouseenter: function() {
    // действия в ответ на наведение мыши на элемент с идентификатором foo
  }
});

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

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

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

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

Начиная с jQuery 1.4.2 многократная установка одной функции в качестве обработчика одного события не приведет к ошибке:

function test(){ alert("Hello"); }
$("button").click( test );
$("button").click( test );

В итоге, при нажатии на кнопку, на экран выведется два одинаковых сообщения.

Для большинства типов событий действует правило, что если обработчик события возвращает значение false, то обрабатываемое событие отменяется. Например, если обработчик события submit вернет false, то отправка формы будет отменена. Такого же результата можно достичь, если указать вместо обработчика события значение false (см. второй вариант использования метода), однако это возможно только в jQuery версии 1.4.3 и старше.

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

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

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

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

В действии

В примере показано, как можно осуществить обработку событий наведения, нажатия и двойного нажатия на элемент:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
    p{background:yellow; font-weight:bold; cursor:pointer; padding:5px;}
    p.over{background: #ccc;}
    span{color:red;}
  ~lt~/style~gt~
  ~lt~script src="//code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~p~gt~"Кликать" сюда.~lt~/p~gt~
  ~lt~span~gt~~lt~/span~gt~
  ~lt~script~gt~
    // при нажатии по элементу ~lt~p~gt~ выведем текст, содержащий координаты клика
    $("p").bind("click", function(event){
      var str = "( " + event.pageX + ", " + event.pageY + " )";
      $("span").text("Клик, это звучит гордо! Особенно в координатах " + str);
    });

    // при двойном нажатии по элементу ~lt~p~gt~ выведем название тега нажатого элемента
    $("p").bind("dblclick", function(){
      $("span").text("Клик - хорошо, а двойной лучше! Нажат элемент " + this.nodeName);
    });

    // при наведении и отведении курсора от элемента ~lt~p~gt~ будем "переключать" наличие класса over
    $("p").bind("mouseenter mouseleave", function(){
      $(this).toggleClass("over");
    });

~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

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