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

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

Почти все эти события мы уже рассматривали в предыдущих разделах. Например, назначить обработчик события click для всех кнопок можно так.

$(":button").bind("click", function() {
   alert("Вы щелкнули на кнопке");
});

Нерассмотренными остались два события мыши. Событие mouseenter выполняется при наведении курсора мыши на элемент, а событие mouseleave — при уходе курсора мыши за пределы элемента. Использование этих событий отличается от обработки событий mouseover и mouseout. Если внутри блока существует другой блок, то событие mouseover будет вызываться при входе во внутренний блок, а событие mouseout — при выходе из него. При использовании событий mouseenter и mouseleave эти перемещения будут игнорироваться (листинг 6.5).

Листинг 6.5. События mouseenter и mouseleave

<!doctype html>
<html>
<head>
<title>События mouseenter и mouseleave</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#div1").bind("mouseover", function() {
      $("#log1").append("Событие mouseover<br>");
   });
   $("#div1").bind("mouseout", function() {
      $("#log1").append("Событие mouseout<br>");
   });
   $("#div2").bind("mouseenter", function() {
      $("#log2").append("Событие mouseenter<br>");
   });
   $("#div2").bind("mouseleave", function() {
      $("#log2").append("Событие mouseleave<br>");
   });
});
</script>
<style>
.cls1 {
   border:2px solid black; background-color:green;
   padding:30px;
}
.cls2 {
   border:2px solid black; background-color:silver;
}
</style>
</head>
<body>
<b>События mouseover и mouseout:</b><br>
<div class="cls1" id="div1">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log1"></div>
<b>События mouseenter и mouseleave:</b><br>
<div class="cls1" id="div2">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log2"></div>
</body>
</html>

Для первого вложенного блока мы определили обработчики событий mouseover и mouseout. Если переместить курсор мыши через весь блок посередине, то получим следующую последовательность событий.

Событие mouseover
Событие mouseout
Событие mouseover
Событие mouseout
Событие mouseover
Событие mouseout

Для второго вложенного блока назначены обработчики событий mouseenter и mouseleave. При том же самом действии получим только два события.

Событие mouseenter
Событие mouseleave

В параметре <Тип события> может быть указана комбинация событий через пробел. Изменим класс ссылки при наведении курсора мыши, а при уходе курсора удалим класс.

$("a").bind("mouseenter mouseleave", function() {
   $(this).toggleClass("cls1");
});

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

$("#div1").bind("myEvent", function() {
   alert("Обработка собственного события");
});
$("#div1").trigger("myEvent"); // Вызов события

В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>([<Объект event>[, <Аргументы>]]) {
   // ...
}

Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре <Объект event> указана переменная, то через нее можно обратиться к свойствам объекта event. В параметре <Аргументы> можно указать несколько переменных через запятую. Значения в эти переменные можно передать с помощью второго параметра методов trigger() и triggerHandler(). Пример:

$("#div1").bind("myEvent", function(e, msg) {
   alert("Обработка собственного события. " + msg);
});
$("#div1").trigger("myEvent", ["Наше сообщение"]);

С помощью необязательного параметра <Данные> можно передать значения в функцию-обработчик. Для этого передаваемые параметры и значения должны быть указаны следующим образом.

{
   Параметр1: "Значение1",
   Параметр2: "Значение2",
   ...
   ПараметрN: "ЗначениеN"
}

Получить значение переданного параметра внутри функции можно так.

<Значение> = <Объект event>.data.<Параметр>

Рассмотрим пример.

function f_click(e) {
   var str = "msg1 = " + e.data.msg1 + "\n";
   str += "msg2 = " + e.data.msg2;
   alert(str);
   return false;
}
$("a").bind(
   "click", // Событие
   {msg1: "Сообщение 1", msg2: "Сообщение 2"}, // Наши данные
   f_click // Ссылка на функцию
);

При щелчке на ссылке будет выведено сообщение со значениями переданных данных.

msg1 = Сообщение 1
msg2 = Сообщение 2

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

$("#btn1").bind("click", function() {
   alert("Первый обработчик");
});
$("#btn1").bind("click", function() {
   alert("Второй обработчик");
});

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

Первый обработчик
Второй обработчик
$(":button").one("click", function() {
   alert("Вы щелкнули на кнопке");
});

После первого щелчка на кнопке будет выведено указанное сообщение, а после второго обработчик вызван уже не будет.

$(document).bind("click", function() { // Обработчик
   alert("Событие onclick");
});
$(document).trigger("click"); // Вызываем обработчик

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

$("#div1").bind("myEvent", function(e, msg1, msg2) {
   $("#div2").append("Событие myEvent. " + msg1 + " " + msg2)
      .append("<br>");
});
$("p").click(function() {
   $("#div1").trigger("myEvent",
                      ['Сообщение1', 'Сообщение2']);
});
<p>Щелкните здесь</p>
<div id="div1"></div>
<div id="div2"></div>

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

Событие myEvent. Сообщение1 Сообщение2
$("form").bind("submit", function(e, msg) {
   if (msg) {
      alert("Форма отправлена не будет. " + msg);
   }
   else {
      alert("Форма будет отправлена");
   }
});
$(":button").bind("click", function() {
   $("form").triggerHandler("submit", ["Наши данные"]);
});
<form action="file.php">
   <input type="text">
   <input type="submit" value="Отправить">
</form>
<input type="button" value="Вызвать обработчик">

В данном примере щелчок на кнопке Вызвать обработчик приводит к запуску обработчика события onclick. Внутри обработчика мы вызываем событие onsubmit и передаем свои данные. На основании этих данных мы можем определить, вызвано ли событие при щелчке на кнопке Отправить или оно вызвано нами искусственно. Если переменная msg определена, то вызов события был произведен с помощью метода triggerHandler(). В этом случае после вывода сообщения данные формы отправлены не будут. Если щелкнуть на кнопке Отправить, то переменная msg будет не определена, и после вывода сообщения данные формы будут отправлены.

$("#btn1").bind("click", function() {
   alert("Вы щелкнули на кнопке");
});
$("#btn2").bind("click", function() {
   $("#btn1").unbind("click");
});
<input type="button" value="Нажми меня" id="btn1">
<input type="button" value="Удалить обработчик" id="btn2">

Если во втором параметре указать название функции, то будет удален только обработчик с таким названием.

function click1() {
   alert("Функция click1()");
}
function click2() {
   alert("Функция click2()");
}

$("#btn1").bind("click", click1);
$("#btn1").bind("click", click2);
$("#btn2").bind("click", function() {
   $("#btn1").unbind("click", click2);
});
<input type="button" value="Нажми меня" id="btn1">
<input type="button" value="Удалить обработчик" id="btn2">

В этом примере мы назначили два обработчика события click для первой кнопки. Если щелкнуть на кнопке Нажми меня, то будут выведены два сообщения.

Функция click1()
Функция click2()

После щелчка на кнопке Удалить обработчик обработчик события с названием click2 будет удален. Теперь после щелчка на первой кнопке получим только одно сообщение.

Функция click1()

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

$("#btn1").unbind();
Предыдущая статья Все статьи Следующая статья