PHP SQL
PHP SQL .ru
  Главная  Уроки  PHP  MySQL  jQuery  RegEx  CSS  Книги  Форум  
 Функции


  На главную

  Назад  Вперед

  Печать

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

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

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

В параметре Тип события может быть указана комбинация событий через пробел. Изменим класс ссылки при наведении курсора мыши, а при уходе курсо-ра удалим класс.
$("а").bind("mouseenter mouseleave", function() {
$(this).toggleClass("clsl");
});

Кроме того, с помощью метода bind () можно назначать собственные события. Вызов собственных событий осуществляется при помощи методов trigger () и triggerHandler (). Создадим собственное событие, а затем вызовем его.
$("#divl").bind("myEvent", function() {
alert("Обработка собственного события");
});
$( "#divl"). trigger ( "myEvent11) ; // Вызов события

В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции([Объект event[, Аргументы] ] ) {
// ...
}

Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event. В параметре Аргументы можно указать несколько переменных через запятую. Значения в эти переменные можно передать с помощью второго пара-метра методов trigger () и triggerHandler ().
$ ("#divl") .bind ("myEvent11, function(e, msg) {
alert("Обработка собственного события. " + msg);
});
$("#divl").trigger("myEvent", ["Наше сообщение"]);

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

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

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

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

Для одного события можно назначить несколько обработчиков. В этом случае они будут вызываться в той последовательности, в которой были определены.
$("#btnl").bind("click", function() {
alert("Первый обработчик");
});
$("#btnl").bind("click", function() {
alert("Второй обработчик");
});

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

• one(Тип события[, Данные], Функция обратного вызова) — позволяет назначить обработчик для всех элементов коллекции. Метод идентичен bind (), но событие срабатывает только один раз, после чего обработчик будет автоматически удален.
$("ibutton").one("click", function()
{ alert("Вы щелкнули на кнопке");
});

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

• trigger ( Тип события[, Массив данных] ) — вызывает обработчик указанного события.
$(document).bind("click", function() {
// Обработчик alert("Событие onclick");
});
$(document).trigger("click"); // Вызываем обработчик

Если указан массив данных, то он будет передан в функцию обратного вызова в обработчике. Каждый параметр будет соответствовать одному элементу массива.
$("#divl").bind("myEvent", function(e, msgl, msg2) {
$ ("#div2") . append (" Событие myEvent. " + msgl + " 11 +
msg2) .append("br");
});
$("p").click(function() {
$("#divl").trigger("myEvent", [“Сообщение1”, “Сообщение2” ] );
});

<р>Нажмите здесь</р> 
<div id="divl"></div> 
<div id="div2"></div>

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

• tгiggerHandlег ( Тип события[, Массив данных] ) — вызывает об-работчик указанного события. В отличие от метода trigger (), событие вызыва-ется только для первого элемента коллекции. Кроме того, при использовании метода tгiggerHandlег() не происходит действие по умолчанию.
$("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= "Отправить11 > </form>
<input type="button" value="Вызвать обработчик">

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

• unbind([Тип события[, Название функции]]) — удаляет обработ-чики событий для всех элементов коллекции.
$("#btnl").bind("click", function() {
alert("Вы нажали на кнопку");
});
$("#btn2").bind("click", function() {
$("#btnl").unbind("click");
});

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

Если во втором параметре указать название функции, то будет удален только об-работчик с таким названием.
function f__clickl() {
alert ( "Функция f__clickl () ") ;
}
function f_click2() {
alert ("Функция f__click2 () " ) ;
}
$("#btnl").bind("click", f_clickl); $ ("#btnl")
.bind("click", f_click2);
$("#btn2").bind("click", function() {
$("#btnl").unbind("click", f_click2);
});

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

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

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

Если параметры не указаны, то будут удалены все обработчики
событий. $("#btnl").unbind();

 
Предыдущая   На главную   Следующая          

Ваш комментарий:

'

Реклама на сайте | Обмен ссылками | Ссылки | Контакты
Добавить статью | Добавить исходник
2010-2014 © phpsql.ru