Продолжаем изучать jQuery, и теперь приступим к изучению такого раздела, как обработка событий в jQuery.
События документа
При взаимодействии пользователя с веб-страницей происходят события. События - это своего рода извещения системы о том, что пользователь выполнил какое-либо действие или внутри самой системы возникло некоторое условие. События возникают в результате щелчка на элементе, перемещения мыши, нажатия клавиши клавиатуры, изменения размеров окна, окончания загрузки веб-страницы и т.д. Зная, какие события может генерировать тот или иной элемент веб-страницы, можно написать функцию для обработки этого события. Например, при отправке данных формы возникает событие onsubmit. При наступлении этого события можно проверить данные, введенные пользователем, и, если они не соответствуют ожидаемым, прервать отправку данных.
В самом начале книги мы уже рассматривали возможность выполнения скриптов сразу после формирования структуры документа, не дожидаясь загрузки других элементов. Как вы уже знаете, обработать это событие можно с помощью метода ready () .
alert("Документ доступен для выполнения скриптов");
});
Если необходимо выполнить какие-либо действия только после полной загрузки самого HTML-документа, а также всех других элементов (например, изображений), то можно воспользоваться методом load (). Синтаксис метода таков.
load{Функция обратного вызова)
function {[Объект event]) {
// ...
}
Выведем подтверждающее сообщение и тип события после полной загрузки веб-страницы.
$(window).load(function(е) {
alert("Документ полностью загружен");
alert("Тип события " + е.type);
});
В результате выполнения получим два сообщения.
Документ полностью загружен
Тип события load
Для выполнения каких-либо действий непосредственно перед выгрузкой документа предназначен метод unload (). Метод имеет следующий синтаксис.
unload(Функция обратного вызова)
В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.
function ([]) {
// ...
}
Выведем сообщение перед выгрузкой документа.
$(window).unload(function()
{ alert("Заходите
еще
!");
});
В этом разделе рассмотрим еще два полезных метода.
resize (Функция обратного вызова) - выполняется при изменении размера окна.
scroll (Функция обратного вызова) - выполняется при прокручивании содержимого элемента страницы, документа, окна или фрейма.
В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции([Объект event]) {
// ...
}
Обработать прокрутку содержимого окна и вывести сообщение можно так.
$(window).scroll(function() {
alert("Прокрутка содержимого окна");
});
В качестве примера использования метода resize () получим ширину и высоту окна после изменения его размера (листинг 6.1).
Листинг 6.1. Вывод ширины и высоты окна при изменении размера
Вывод ширины и высоты окна при изменении
размера
При изменении размера окна в элементе с идентификатором divl будет выведена ширина и высота окна.
Метод error (Функция обратного вызова) вызывается при наличии ошибки на странице или в коде JavaScript. В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции([Сообщение[, URL[, Номер строки]]]){
// ...
}
Если ошибка произошла в объекте window, то в функции обратного вызова будут доступны три параметра:
Сообщение - текст, описывающий ошибку;
URL - полный URL-адрес документа с ошибкой;
Номер строки - номер строку с ошибкой.
Чтобы скрыть ошибки JavaScript от пользователей, необходимо внутри функции обратного вызова вернуть значение true.
$(window).error(function(){
return true;
});
С помощью метода error () можно обработать ошибку загрузки изображения.
$("img").error(function() {
$(this).attr("src", "noimage.gif");
});
Обратите внимание
Для корректной работы этого примера необходимо разместить скрипт на сервере. В противном случае обработки события не будет.
События мыши в jQuery
Для обработки событий мыши в jQuery предназначены следующие методы.
Click ([Функция обратного вызова]) - выполняется при щелчке на элементе или веб-странице. Если параметр не указан, то это позволит имитировать щелчок на элементе. Событию onclick предшествуют два события: оnmousedown и onmouseup. Выведем сообщение после щелчка на любой кнопке.
$ ("ibutton") .click(function() {
});
Toggle () - позволяет чередовать несколько функций при щелчке на элементе или веб-странице. Функции вызываются по очереди. При первом щелчке вызывается первая функция, при втором - вторая, при третьем - третья. Если третья функция не определена, то вызывается опять первая функция, и т.д. Метод toggle () имеет следующий формат.
toggle(,
[,
])
Сделаем цвет текста абзаца меняющимся после каждого щелчка мыши.
$("р").toggle
(function() {
$(this).css("color", "red");
function() {
$(this).css("color", "blue");
function() {
$(this).css("color", "green");
}
) .click();
Попробуйте щелкнуть несколько раз на абзаце. Цвет текста будет последовательно меняться с красного на синий, с синего - на зеленый, с зеленого - опять на красный. Обратите внимание на последнюю строку примера. После назначения обработчика события вызывается событие onclick с помощью метода click () без параметров. По этой причине с самого начала цвет абзаца будет красным.
Dblclick([Функция обратного вызова]) - выполняется при двойном щелчке на элементе или веб-странице. Если параметр не указан, то это позволит имитировать двойной щелчок на элементе. Событию ondblclick предшествуют три события: onmousedown, onmouseup и onclick. Выведем сообщение при двойном щелчке на любом абзаце.
$("р").dblclick(function() {
alert("Вы сделали двойной щелчок");
});
mousedown (Функция обратного вызова) - выполняется при нажатии кнопки мыши на элементе или странице. Событие onmousedown возникает перед событиями onmouseup и onclick.
mouseup (Функция обратного вызова) - выполняется при отпускании ранее нажатой кнопки мыши. Событие onmouseup возникает между событиями onmousedown и onclick. Выведем сообщения при нажатии и отпускании кнопки мыши над абзацем.
$("р").mousedown(function() {
$("#divl").append("Событие onmousedown" + "
");
}).mouseup(function() {
$("#divl").append("Событие onmouseup" + "
");
});
Щелкни меня
Mousemove (Функция обратного вызова) - выполняется при любом перемещении мыши. Выведем сообщение при перемещении курсора над абзацем.
$("р") .mousemove(function() {
$("#divl").append("Событие onmousemove" + "
");
});
mouseover (Функция обратного вызова) - выполняется при наведении курсора мыши на элемент.
mouseout (Функция обратного вызова) - выполняется при выходе курсора мыши за пределы элемента. При наведении курсора на ссылку сделаем цвет ссылки красным и выведем сообщение, а при уходе курсора со ссылки - изменим ее цвет на черный и выведем сообщение.
$("а
") .mouseover(function() {
$(this).css("color", "red");
$("#divl").append("Событие
onmouseover" + "
");
}).mouseout(function() {
$(this) .css ("color", "black");
$("#divl").append("Событие
onmouseout" + "
");
}>;
Hover () - позволяет обработать наведение и уход курсора с элемента с помощью одного метода. Имеет следующий формат.
hover(Функция обратного вызова для события onmouseover, Функция обратного вызова для события onmouseout)
Переделаем наш предыдущий пример и используем метод hover ().
$("а").hover(function() {
$ (this) .css("color", "red");
$("#divl").append("Событие onmouseover" + "
"); },
function() {
$(this).css("color", "black");
$("#divl").append("Событие onmouseout" + "
");
});
Использование метода hover () имеет еще одно преимущество. Если внутри блока существует другой блок, то отдельные функции будут вызываться при входе во внутренний блок, а также при выходе из него. При использовании метода hover () эти перемещения будут игнорироваться (листинг 6.2).
Листинг 6.2. Особенности использования метода hover ()
Особенности использования метода hover()
.cls1 {
padding:30px;
}
.cls2 {
}
Отдельные
обработчики
:
Строка
1
Строка 2
Функция
hover():
Строка
1
Строка 2
Для первого вложенного блока мы определили отдельные обработчики событий. Если переместить курсор мыши через весь блок посередине, получим следующую последовательность событий.
Событие onmouseover
Событие onmouseout
Событие onmouseover
Событие onmouseout
Событие onmouseover
Событие onmouseout
Для второго вложенного блока обработчики событий назначены с помощью метода hover (). При том же самом действии мы получим только два события.
Событие onmouseover
Событие onmouseout
Во всех приведенных в этом разделе методах мы еще не разобрались с параметром, который можно им передать.
// ...
}
Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event. Напишем обработчик щелчка мыши для двух элементов сразу. При нажатии выведем название тега в элементе с идентификатором divl.
$("р
, div").click(function(е
) {
$("#divl")
.append("Элемент
" + e.srcElement.tagName + "
");
});
События клавиатуры в jQuery
Для обработки событий клавиатуры в jQuery предназначены следующие методы.
keydown (Функция обратного вызова) - выполняется при нажатии клавиши клавиатуры.
keyprcss (Функция обратного вызова) -выполняется при нажатии клавиши клавиатуры. Аналогичен методу keydown (), но возвращает значение кода символа в кодировке Unicode. Событие генерируется постоянно, пока пользователь не отпустит клавишу.
keyup (Функция обратного вызова) - выполняется при отпускании ранее нажатой клавиши клавиатуры.
В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции([Объект event]) {
// ...
}
Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event. Например, чтобы получить код нажатой клавиши, можно воспользоваться свойством key Code. В качестве примера получим код нажатой клавиши и продемонстрируем последовательность прохождения событий (листинг 6.3).
Листинг 6.3. События клавиатуры
События
клавиатуры
Выделите текстовое поле и нажмите какую-либо клавишу на клавиатуре. Например, нажмем клавишу А при русской раскладке клавиатуры. В итоге получим следующее сообщение.
keydown 70
keyprcss 1072
keyup 7 0
События формы в jQuery
Для обработки событий формы предназначены такие методы.
focus ([Функция обратного вызова]) - выполняется при получении фокуса элементом формы. Если параметр не указан, то элемент получит фокус ввода.
blur ([Функция обратного вызова]) - выполняется при потере фокуса элементом формы. Если параметр не указан, то элемент потеряет фокус ввода.
change {Функция обратного вызова) - выполняется при изменении данных в текстовом поле и перемещении фокуса на другой элемент формы либо при отправке данных формы.
submit ([Функция обратного вызова]) - выполняется при отправке данных формы. Если параметр не указан, то форма будет отправлена.
select ([ Функция обратного вызова ]) - выполняется при выделении содержимого элемента. Если параметр не указан, то содержимое элемента будет полностью выделено.
В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции([Объект event]) {
// ...
}
Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event.
Продемонстрируем обработку различных событий формы (листинг 6.4).
События
формы
Пункт
1
Пункт
2
Пункт
3
Пункт
4
Итак, мы создали форму с тремя элементами. При выборе пункта из списка будет отображено сообщение со значением выбранного пункта. Если выделить текстовое поле, то изменится цвет фона, а если убрать фокус с поля, то цвет фона опять станет белым. Щелчок на кнопке Отправить вызывает отображение диалогового окна, с помощью которого можно прервать отправку данных формы. Под формой расположены четыре кнопки. Первая кнопка позволяет выделить содержимое текстового поля. После выделения будет отображено сообщение о выделении фрагмента, так как мы определили соответствующий обработчик. Такое же сообщение можно получить, если с помощью мыши выделить фрагмент в поле. Вторая кнопка позволяет установить фокус ввода на текстовое поле, а третья - его снять. И, наконец, четвертая кнопка предназначена для отправки данных формы. Щелчок на этой кнопке приводит к выводу диалогового окна для подтверждения отправки данных.
Универсальные обработчики событий в jQuery
В предыдущих разделах мы рассмотрели обработчики конкретных событий. Библиотека 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
События
mouseenter и
mouseleave
.cls1 {
border:2px solid black; background-color:green;
padding:30px;
}
.cls2 {
border:2px solid black; background-color:silver;
}
События
mouseover и
mouseout:
Строка
1
Строка 2
События
mouseenter и
mouseleave:
Строка
1
Строка 2
Для первого вложенного блока мы определили обработчики событий 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[, Аргументы] ]) {
// ...
}
$ ("#divl") .bind ("myEvent11, function(e, msg) {
});
$("#divl").trigger("myEvent", ["Наше сообщение"]);
С помощью необязательного параметра Данные можно передать значения в функцию-обработчик. Для этого передаваемые параметры и значения должны быть указаны следующим образом.
{
Параметр1: «Значение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
Для одного события можно назначить несколько обработчиков. В этом случае они будут вызываться в той последовательности, в которой были определены.
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” ]);
});
Нажмите здесь
В результате выполнения этого кода получим сообщение.
Событие 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”, ["Наши данные"]) ;
});
