Вы здесь: Главная >> Jquery-учебник >> Обработка событий в jQuery
Обработка событий в jQuery
Продолжаем изучать jQuery, и теперь приступим к изучению такого раздела, как обработка событий в jQuery.
События документа
При взаимодействии пользователя с веб-страницей происходят события. События — это своего рода извещения системы о том, что пользователь выполнил какое-либо действие или внутри самой системы возникло некоторое условие. События возникают в результате щелчка на элементе, перемещения мыши, нажатия клавиши клавиатуры, изменения размеров окна, окончания загрузки веб-страницы и т.д. Зная, какие события может генерировать тот или иной элемент веб-страницы, можно написать функцию для обработки этого события. Например, при отправке данных формы возникает событие onsubmit. При наступлении этого события можно проверить данные, введенные пользователем, и, если они не соответствуют ожидаемым, прервать отправку данных.
В самом начале книги мы уже рассматривали возможность выполнения скриптов сразу после формирования структуры документа, не дожидаясь загрузки других элементов. Как вы уже знаете, обработать это событие можно с помощью метода ready () .
$(document).ready(function() {
alert("Документ доступен для выполнения скриптов");
});
Если необходимо выполнить какие-либо действия только после полной загрузки самого HTML-документа, а также всех других элементов (например, изображений), то можно воспользоваться методом load (). Синтаксис метода таков.
load{Функция обратного вызова)
В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.
function <Название функции>{[Объект event]) {
// ...
}
Выведем подтверждающее сообщение и тип события после полной загрузки веб-страницы.
$(window).load(function(е) {
alert("Документ полностью загружен");
alert("Тип события " + е.type);
});
В результате выполнения получим два сообщения.
Документ полностью загружен
Тип события load
Для выполнения каких-либо действий непосредственно перед выгрузкой документа предназначен метод unload (). Метод имеет следующий синтаксис.
unload(Функция обратного вызова)
В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.
function <Название функции>([<Объект event>]) {
// ...
}
Выведем сообщение перед выгрузкой документа.
$(window).unload(function()
{ alert("Заходите еще!");
});
В этом разделе рассмотрим еще два полезных метода.
resize (Функция обратного вызова) — выполняется при изменении размера окна.
scroll (Функция обратного вызова) — выполняется при прокручивании содержимого элемента страницы, документа, окна или фрейма.
В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции([Объект event]) {
// ...
}
Обработать прокрутку содержимого окна и вывести сообщение можно так.
$(window).scroll(function() {
alert("Прокрутка содержимого окна");
});
В качестве примера использования метода resize () получим ширину и высоту окна после изменения его размера (листинг 6.1).
Листинг 6.1. Вывод ширины и высоты окна при изменении размера
<html>
<head>
<title>Вывод ширины и высоты окна при изменении
размера</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() {
$(window).resize(function() {
var elem = $(window);
$("#div1").html("Ширина: " + elem.width() + "<br>")
.append("Высота: " + elem.height());
});
});
//-->
</script>
</head>
<body><div id="div1"></div></body>
</html>
При изменении размера окна в элементе с идентификатором 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() {
alert("Вы нажали на кнопку");
});
• toggle () — позволяет чередовать несколько функций при щелчке на элементе или веб-странице. Функции вызываются по очереди. При первом щелчке вызывается первая функция, при втором — вторая, при третьем — третья. Если третья функция не определена, то вызывается опять первая функция, и т.д. Метод toggle () имеет следующий формат.
toggle(<Функция обратного вызова 1>,
<Функция обратного вызова 2>[,
<Функция обратного вызова N>])
Сделаем цвет текста абзаца меняющимся после каждого щелчка мыши.
$("р").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" + "<br>");
}).mouseup(function() {
$("#divl").append("Событие onmouseup" + "<br>");
});
<р>Щелкни меня</р>
<div id="divl"></div>
• mousemove (Функция обратного вызова) — выполняется при любом перемещении мыши. Выведем сообщение при перемещении курсора над абзацем.
$( "р") .mousemove(function() {
$("#divl").append("Событие onmousemove" + "<br>");
});
mouseover (Функция обратного вызова) — выполняется при наведении курсора мыши на элемент.
mouseout (Функция обратного вызова) — выполняется при выходе курсора мыши за пределы элемента. При наведении курсора на ссылку сделаем цвет ссылки красным и выведем сообщение, а при уходе курсора со ссылки — изменим ее цвет на черный и выведем сообщение.
$( "а") .mouseover(function() {
$(this).css("color", "red");
$("#divl").append("Событие onmouseover" + "<br>");
}).mouseout(function() {
$(this) .css ("color", "black");
$("#divl").append("Событие onmouseout" + "<br>");
}>;
• hover () — позволяет обработать наведение и уход курсора с элемента с помощью одного метода. Имеет следующий формат.
hover(Функция обратного вызова для события onmouseover, Функция обратного вызова для события onmouseout)
Переделаем наш предыдущий пример и используем метод hover ().
$("а").hover(function() {
$ (this) .css("color", "red");
$("#divl").append("Событие onmouseover" + "<br>"); },
function() {
$(this).css("color", "black");
$("#divl").append("Событие onmouseout" + "<br>");
});
Использование метода hover () имеет еще одно преимущество. Если внутри блока существует другой блок, то отдельные функции будут вызываться при входе во внутренний блок, а также при выходе из него. При использовании метода hover () эти перемещения будут игнорироваться (листинг 6.2).
Листинг 6.2. Особенности использования метода hover ()
<html>
<head>
<title>Особенности использования метода hover()</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").mouseover(function() {
$("#log1").append("Событие onmouseover<br>");
});
$("#div1").mouseout(function() {
$("#log1").append("Событие onmouseout<br>");
});
$("#div2").hover(
function() {
$("#log2").append("Событие onmouseover<br>");
},
function() {
$("#log2").append("Событие onmouseout<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>Отдельные обработчики:</b><br>
<div class="cls1" id="div1">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log1"></div>
<b>Функция hover():</b><br>
<div class="cls1" id="div2">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log2"></div>
</body>
</html>
Для первого вложенного блока мы определили отдельные обработчики событий. Если переместить курсор мыши через весь блок посередине, получим следующую последовательность событий.
Событие onmouseover
Событие onmouseout
Событие onmouseover
Событие onmouseout
Событие onmouseover
Событие onmouseout
Для второго вложенного блока обработчики событий назначены с помощью метода hover (). При том же самом действии мы получим только два события.
Событие onmouseover
Событие onmouseout
Во всех приведенных в этом разделе методах мы еще не разобрались с параметром, который можно им передать. В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции([Объект event]) {
// ...
}
Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event. Напишем обработчик щелчка мыши для двух элементов сразу. При нажатии выведем название тега в элементе с идентификатором divl.
$("р, div").click(function(е) {
$("#divl")
.append("Элемент " + e.srcElement.tagName + "<br>");
});
События клавиатуры в jQuery
Для обработки событий клавиатуры в jQuery предназначены следующие методы.
keydown (Функция обратного вызова) — выполняется при нажатии клавиши клавиатуры.
keyprcss (Функция обратного вызова) —выполняется при нажатии клавиши клавиатуры. Аналогичен методу keydown (), но возвращает значение кода символа в кодировке Unicode. Событие генерируется постоянно, пока пользователь не отпустит клавишу.
keyup (Функция обратного вызова) — выполняется при отпускании ранее нажатой клавиши клавиатуры.
В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции([Объект event]) {
// ...
}
Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event. Например, чтобы получить код нажатой клавиши, можно воспользоваться свойством key Code. В качестве примера получим код нажатой клавиши и продемонстрируем последовательность прохождения событий (листинг 6.3).
Листинг 6.3. События клавиатуры
<html>
<head>
<title>События клавиатуры</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() {
$(":text").keyup(function(e){
$("#div1").append("keyup " + e.keyCode + "<br>");
});
$(":text").keydown(function(e){
$("#div1").append("keydown " + e.keyCode + "<br>");
});
$(":text").keypress(function(e){
$("#div1").append("keypress " + e.keyCode + "<br>");
});});
//-->
</script>
</head>
<body>
<input type="text">
<div id="div1"></div>
</body>
</html>
Выделите текстовое поле и нажмите какую-либо клавишу на клавиатуре. Например, нажмем клавишу А при русской раскладке клавиатуры. В итоге получим следующее сообщение.
keydown 70
keyprcss 1072
keyup 7 0
События формы в jQuery
Для обработки событий формы предназначены такие методы.
focus ( [Функция обратного вызова] ) — выполняется при получении фокуса элементом формы. Если параметр не указан, то элемент получит фокус ввода.
blur ( [Функция обратного вызова] ) — выполняется при потере фокуса элементом формы. Если параметр не указан, то элемент потеряет фокус ввода.
change {Функция обратного вызова) — выполняется при изменении данных в текстовом поле и перемещении фокуса на другой элемент формы либо при отправке данных формы.
submit ( [Функция обратного вызова] ) — выполняется при отправке данных формы. Если параметр не указан, то форма будет отправлена.
select ( [ Функция обратного вызова ] ) — выполняется при выделении содержимого элемента. Если параметр не указан, то содержимое элемента будет полностью выделено.
В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции([Объект event]) {
// ...
}
Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event.
Продемонстрируем обработку различных событий формы (листинг 6.4).
<html>
<head>
<title>События формы</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() {
$(":text").focus(function() {
$(this).css("background-color", "#fffbef");
}).blur(function() {
$(this).css("background-color", "#ffffff");
});
$("#sel1").change(function(){
alert("Значение выбранного пункта " + $(this).val());
});
$("form").submit(function(){
if (window.confirm("Отправить данные формы?")) {
return true;
}
else return false;
});
$(":text").select(function(){
alert("Выделен фрагмент");
});
$("#btn1").click(function(){
$("#txt1").select();
});
$("#btn2").click(function(){
$("#txt1").focus();
});
$("#btn3").click(function(){
$("#txt1").blur();
});
$("#btn4").click(function(){
$("#frm").submit();
});
});
//-->
</script>
</head>
<body>
<form id="frm">
<select id="sel1">
<option value="1">Пункт 1</option>
<option value="2">Пункт 2</option>
<option value="3">Пункт 3</option>
<option value="4">Пункт 4</option>
</select>
<input type="text" id="txt1">
<input type="submit" value="Отправить">
</form>
<input type="button" value="Выделить поле" id="btn1">
<input type="button" value="Установить фокус на поле"
id="btn2">
<input type="button" value="Снять фокус с поля" id="btn3">
<input type="button" value="Отправить форму" id="btn4">
</body>
</html>
Итак, мы создали форму с тремя элементами. При выборе пункта из списка будет отображено сообщение со значением выбранного пункта. Если выделить текстовое поле, то изменится цвет фона, а если убрать фокус с поля, то цвет фона опять станет белым. Щелчок на кнопке Отправить вызывает отображение диалогового окна, с помощью которого можно прервать отправку данных формы. Под формой расположены четыре кнопки. Первая кнопка позволяет выделить содержимое текстового поля. После выделения будет отображено сообщение о выделении фрагмента, так как мы определили соответствующий обработчик. Такое же сообщение можно получить, если с помощью мыши выделить фрагмент в поле. Вторая кнопка позволяет установить фокус ввода на текстовое поле, а третья — его снять. И, наконец, четвертая кнопка предназначена для отправки данных формы. Щелчок на этой кнопке приводит к выводу диалогового окна для подтверждения отправки данных.
Универсальные обработчики событий в 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
<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: «Значение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();
Методы live() и die() в jQuery
Назначение обработчиков событий с помощью метода bind() имеет один существенный недостаток. Если мы назначили обработчик, а затем добавили новые элементы, то для этих элементов обработчики событий назначены не будут.
$(":button").bind("click", function() {
var html = `<input type="button" value="Hoвaя кнопка">`;
$(this).after("<br>" + html);
});
<input type="button" value="Кнопка">
В этом примере мы назначили обработчик события click для всех кнопок. После щелчка на кнопке добавляется новая кнопка. Если попробовать на ней щелкнуть, то никаких изменений не произойдет.
Для динамического назначения обработчиков событий предназначен метод live(). Переделаем наш предыдущий пример и используем метод live () вместо bind ().
$(":button").live("click", function() {
var html = `<input type="button" value="Новая кнопка">`;
$(this).after("<br>" + html);
});
В этом случае, если щелкнуть на новой кнопке, появится еще одна кнопка. Щелчок на этой кнопке приведет к созданию еще одной кнопки и т.д.
Обратите внимание
Метод live () доступен начиная с версии jQuery 1.3. В более ранних версиях можно использовать модуль Live Query.
Метод live () имеет следующий формат, live(Тип события, Функция обратного вызова)
В параметре Тип события могут быть указаны следующие значения:
события мыши: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout;
события клавиатуры: keydown, keyprcss, keyup.
Кроме того, с помощью метода live () можно назначать собственные события. Вызов собственных событий осуществляется при помощи методов trigger () и trigger-Handler (). Создадим собственное событие, а затем вызовем его.
$("#divl").live("myEvent", function() {
alert("Обработка собственного события");
});
$(":button").click(function() {
$("#divl").trigger("myEvent"); // Вызов события
});
В качестве параметра «Функция обратного вызова> указывается ссылка на функцию следующего формата.
function Название функции {[Объект event[, Аргументы] ] ) {
// ...
}
Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event. В параметре Аргументы можно указать несколько переменных через запятую. Значения в эти переменные можно передать с помощью второго параметра методов trigger () и triggerHandler ().
$("#divl").bind("myEvent", function(e, msg) {
alert("Обработка собственного события. " + msg);
});
$(":button").click(function() {
$("#divl").trigger("myEvent", ["Наше сообщение"]);
});
Удалить обработчик события можно с помощью метода die (). Формат метода: die(Тип события[, Название функции])
Обратите внимание
Метод die () доступен начиная с версии jQuery 1.3.
Рассмотрим пример.
$("#btnl").live("click", function()
{ alert("Вы нажали на кнопку");
});
$("#btn2").click(function() {
$( "#btnl").die("click") ; // Удаляем обработчик
});
<input type="button" уа1ие="Нажми меня" id="btnl">
<input type="button" value="Удалить обработчик" id="btn2">
Если во втором параметре указать название функции, то будет удален только обработчик с таким названием.
function f_clickl() {
alert("Функция f_clickl()");
}
function f_click2() {
alert("Функция f_click2()");
$("#btnl").live("click", f_clickl);
$("#btnl").live("click", f_click2);
$("#btn2").click(function() {
$("#btnl").die("click", f_click2);
});
<input type="button" value="Нажми меня" id="btnl">
<input type="button" value="Удалить обработчик" id="btn2">
В этом примере мы назначили два обработчика события click для первой кнопки. Если щелкнуть на кнопке Нажми меня, то будут выведены два сообщения.
Функция f_clJck1()
Функция f_clJck2()
В результате щелчка на кнопке Удалить обработчик обработчик события с названием f_click2 будет удален. Теперь после щелчка на первой кнопке получим только одно сообщение.
Функция f_click1()
Всплывание событий в jQuery
Что же такое "всплывание" событий? Давайте рассмотрим следующий пример (листинг 6.6).
Листинг 6.6. Всплывание событий
<html>
<head>
<title>Всплывание событий</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() {
$("*").click(function(e) {
$("#div1")
.append("Элемент " + $(this)[0].tagName + "<br>");
});
});
//-->
</script>
</head>
<body>
<p>Щелкните мышью <span style="color:red">здесь</span></p>
<div id="div1"></div>
</body>
</html>
В этом примере мы написали обработчик события onclick для всех элементов страницы. Попробуем щелкнуть левой кнопкой мыши на слове здесь. В итоге, вместо одного события, получим целую последовательность событий.
Элемент SPAN
Элемент Р
Элемент BODY
Элемент HTML
Иными словами, событие onclick последовательно передается очередному элементу-родителю. Для тега span элементом-родителем является абзац. Для абзаца элементом-родителем является само тело документа, а для тела документа элементом-родителем является тег html. Такое прохождение событий и называется всплыванием событий.
Иногда всплывание событий необходимо прервать. Для этого внутри функции обратного вызова следует вернуть значение false. Продемонстрируем это на примере (листинг 6.7).
Листинг 6.7. Прерывание всплывания событий
<html>
<head>
<title>Прерывание всплывания событий</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() {
$("*").click(function(e) {
$("#div1")
.append("Элемент " + $(this)[0].tagName + "<br>");
return false;
});
});
//-->
</script>
</head>
<body>
<p>Щелкните мышью <span style="color:red">здесь</span></p>
<div id="div1"></div>
</body>
</html>
Попробуем теперь щелкнуть левой кнопкой мыши на слове здесь. В итоге, вместо четырех событий, получим только одно.
Элемент SPAN
Кроме возврата значения false, для прерывания всплывания событий можно воспользоваться методом stopPropagation () объекта event (листинг 6.8).
Листинг 6.8. Прерывание всплывания с помощью метода stopPropagation()
stopPropagation()
<html>
<head>
<title>Прерывание всплывания с помощью метода
stopPropagation()</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() {
$("*").click(function(e) {
$("#div1")
.append("Элемент " + $(this)[0].tagName + "<br>");
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
});
});
//-->
</script>
</head>
<body>
<p>Щелкните мышью <span style="color:red">здесь</span></p>
<div id="div1"></div>
</body>
</html>
Действия по умолчанию в jQuery и их отмена
Для многих событий назначены действия по умолчанию, т.е. действия, которые веб-браузер выполняет в ответ на возникшие в документе события. Например, при щелчке на гиперссылке действием по умолчанию будет переход по указанному URL-адресу, щелчок на кнопке Submit приводит к отправке данных формы и т.д.
Иногда действия по умолчанию необходимо прервать. Например, при отправке данных формы можно проверить их на соответствие ожидаемым и, если они не соответствуют установленным требованиям, прервать отправку. Для этого внутри функции обработчика необходимо вернуть значение false.
В листинге 6.9 приведен пример проверки правильности ввода почтового адреса в поле E-mail и прерывания перехода по гиперссылке при обнаружении ошибки.
Листинг 6.9. Прерывание действий по умолчанию
<html>
<head>
<title>Прерывание действий по умолчанию</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() {
$("#frm").submit(function() {
var p = /^[a-z0-9_.-]+@([a-z0-9-]+.)+[a-z]{2,4}$/i;
if (p.test($("#email").val())) {
if (window.confirm("Отправить данные формы?")) {
return true;
}
else return false;
}
else {
alert("E-mail введен не правильно");
return false;
}
});
$("a").click(function() {
alert("Перехода по ссылке не будет");
return false;
});
$("#email").focus(function() {
$(this).css("background-color", "#fffbef");
}).blur(function() {
$(this).css("background-color", "#ffffff");
});
});
//-->
</script>
</head>
<body>
<form action="file.php" method="GET" id="frm">
E-mail:<br>
<input type="text" name="email" id="email"><br>
<input type="submit" value="Отправить">
</form>
<a href="file.html">Нажмите для перехода по ссылке</a><br><br>
</body>
</html>
Кроме возврата значения false, для отмены действий по умолчанию можно воспользоваться методом preventDef ault () объекта event (листинг 6.10).
Листинг 6.10. Прерывание событий с помощью метода preventDefault()
preventDefault()
<html>
<head>
<title>Прерывание событий с помощью метода
preventDefault()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_preventDefault(e) {
(e.preventDefault) ? e.preventDefault() : e.returnValue =
false;
}
$(document).ready(function() {
$("#frm").submit(function(e) {
var p = /^[a-z0-9_.-]+@([a-z0-9-]+.)+[a-z]{2,4}$/i;
if (p.test($("#email").val())) {
if (window.confirm("Отправить данные формы?")) {
return true;
}
else f_preventDefault(e);
}
else {
alert("E-mail введен не правильно");
f_preventDefault(e);
}
});
$("a").click(function(e) {
alert("Перехода по ссылке не будет");
f_preventDefault(e);
});
$("#email").focus(function() {
$(this).css("background-color", "#fffbef");
}).blur(function() {
$(this).css("background-color", "#ffffff");
});
});
//-->
</script>
</head>
<body>
<form action="file.php" method="GET" id="frm">
E-mail:<br>
<input type="text" name="email" id="email"><br>
<input type="submit" value="Отправить">
</form>
<a href="file.html">Нажмите для перехода по ссылке</a><br><br>
</body>
</html>
Сергей Владимирцев
20.02.2011