web-development.ucoz.ru

Описание: Прикрепляет обработчик событий для элементов.

Метод .bind() является основным средством прикрепления поведения к документу. Все типы события JavaScript, такие как focus, mouseover, и resize, разрешенны для eventType. (события beforeunload и error на объект window используют нестандартные конвенции и не поддерживаются jQuery; прикрепляйте обработчик напрямую к объекту window вместо этого.)

Библиотека jQuery предоставляет сокращенные методы для связывания стандартных типов событий, таких как .click() для .bind('click'). Описание для каждой может быть найденно в обсуждении сокращенного метода: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

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

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

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

Основы использования .bind():

$('#foo').bind('click', function() {
 alert('Пользователь нажал на "foo."');
});

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

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

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

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

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

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

$('#foo').bind({
 click: function() {
 // делать что-либо по нажатию
 },
 mouseenter: function() {
 // делать что-либо при входе мышки в объект
 }
});

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

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

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

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

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

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

Код выше, будет генерировать два предупреждения, когда нажата кнопка.

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

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

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

Возврат 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 в их среде, оба покажут сообщение 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);
});

На этот раз переменная не относится к непосредственно обработчику, наоборот, переменная передается по значению через eventData, который фиксирует значение на момент связывания события. Первый обработчик сейчас покажет Spoon!, в то время как второй выдаст сообщение Not in the face!

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

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

Смотрите метод .trigger() для пути передачи данных обработчику на момент происхождения события, а не когда обработчик привязан.

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

Пример 1

 $("p").bind("click", function(e){
 var str = "( " + e.pageX + ", " + e.pageY + " )";
 $("span").text("Click happened! " + str);
 });
 $("p").bind("dblclick", function(){
 $("span").text("Double-click happened in " + this.tagName);
 });
 $("p").bind("mouseenter mouseleave", function(e){
 $(this).toggleClass("over");
 });

function handler(event) {
 alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

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

$("form").bind("submit", function() { return false; })

$("form").bind("submit", function(event){
 event.preventDefault();
});

$("form").bind("submit", function(event){
 if( event.stopPropagation ) 
 { event.stopPropagation(); } //For 'Good' browsers
 else { event.cancelBubble = true; } //For IE
});

 $("p").bind("myCustomEvent", function(e, myName, myValue){
 $(this).text(myName + ", hi there!");
 $("span").stop().css("opacity", 1)
 .text("myName = " + myName)
 .fadeIn(30).fadeOut(1000);
 });
 $("button").click(function () {
 $("p").trigger("myCustomEvent", [ "John" ]);
 });

$("div.test").bind({
 click: function(){
 $(this).addClass("active");
 },
 mouseenter: function(){
 $(this).addClass("inside");
 },
 mouseleave: function(){
 $(this).removeClass("inside");
 }
});