Оглавление

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

В предыдущих разделах мы рассмотрели обработчики конкретных событий. Библиотека jQuery позволяет также назначить обработчики для разных событий (в том числе и собственных событий) одним методом. Для назначения, вызова и удаления обработчиков предназначены следующие методы.
• bind(<Тил события>[, <Данные>] , <Функция обратного вызова>) — позволяет назначить обработчик для всех элементов коллекции. В параметре <Тип события> могут быть указаны следующие значения:
  -   события документа: load, unload, resize, scroll, error;
  -   события   мыши:   click,   dblclick,   mousedown,   mouseup,   mousemove, mouseover, mouseout,

   mouseenter, mouseleave;
  -   события клавиатуры: keydown, keypress, keyup;
  -   события формы: focus, blur, change, select, submit.

 


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

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


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

 

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

<html>
<head>
<title>События mouseenter и mouseleave</title>
<meta http-equiv="Content-Type"
      content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(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 и mouse leave. При том же действии получим только два события.
Событие 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);
});
$("#divl").trigger("myEvent", ["Наше  сообщение"]);


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

• • •
Параметры:   "ЗначениеN"
}

 

Получить значение переданного параметра внутри функции можно так.
<3начеиие> = <Объект event>.data.<Параметр>

 

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

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


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

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

 

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

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

 

При щелчке на элементе с идентификатором btnl будут последовательно выведены два сообщения.
Первый обработчик Второй обработчик
• one(<Тип события>[, <Данные>], <Функция обратного вызова>) — позволяет назначить обработчик для всех элементов коллекции. Метод идентичен bind (), но событие срабатывает только один раз, после чего обработчик будет автоматически удален.

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

После первого щелчка на кнопке будет выведено указанное сообщение, а после второго обработчик вызван уже не будет.
• trigger(< Тип события>[, <Массив данных>]) — вызывает обработчик указанного события.

$(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="divl"></div> 
<div id="div2"></div>


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

 

• triggerHandler(<Тип события>[, <Массив данных>] ) — вызывает обработчик указанного события. В отличие от метода trigger (), событие вызывается только для первого элемента коллекции. Кроме того, при использовании метода triggerHandler () не происходит действие по умолчанию.

$("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. Внутри обработчика мы вызываем событие onsub-mit и передаем свои данные. На основании этих данных мы можем определить, вызвано ли событие при щелчке на кнопке Отправить или оно вызвано нами искусственно. Если переменная msg определена, то вызов события был произведен с помощью метода triggerHandler (). В этом случае после вывода сообщения данные формы отправлены не будут. Если щелкнуть на кнопке Отправить, то переменная msg будет не определена, и после вывода сообщения данные формы будут отправлены.

 

• unbind([<Тип события> [, <Название функции>]]) — удаляет обработчики событий для всех элементов коллекции.

$("#btnl").bind("click", function() {
   alert("Вы нажали на кнопку");
});
$("#btn2").bind("click", function() { 
   $("#btn1").unbind("click");
});

 
<input type="button" value="Haжми меня" id="btn1">
<input type="button" value="Удалить обработчик" id="btn2">

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

 

function f_clickl() {
   alert("Функция f_clickl()");
}
function f_click2() {
   alert("Функция f_click2()");
}
$("#btnl").bind("click", f_click1); 
$("#btn1").bind("click", f_click2); 
$("#btn2").bind("click", function() { 
	$("#btn1").unbind("click", f_click2);
});
 
<input  type="button" value="Haжми меня" id="btnl">
<input  type="button" value="Удалить обработчик" id="btn2">

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

Функция f_click1()

Функция f_click2()

 

После щелчка на кнопке Удалить обработчик обработчик события с названием f_click2 будет удален. Теперь после щелчка на первой кнопке мы получим только одно сообщение.
Функция f_click1()
Если параметры не указаны, то будут удалены все обработчики событий.

$("#btn1").unbind();

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити