Обработка событий

При взаимодействии пользователя с веб-страницей происходят события. События — это своего рода извещения системы о том, что пользователь выполнил какое-либо действие или внутри самой системы возникло некоторое условие. События возникают в результате щелчка на элементе, перемещения мыши, нажатия клавиши клавиатуры, изменения размеров окна, окончания загрузки веб-страницы и т. д. Зная, какие события может генерировать тот или иной элемент веб-страницы, можно написать функцию для обработки этого события. Например, при отправке данных формы возникает событие onsubmit. При наступлении этого события можно проверить данные, введенные пользователем, и, если они не соответствуют ожидаемым, прервать отправку данных.

События документа

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

$(document).ready(function() {
   alert("Документ доступен для выполнения скриптов");
});

Если необходимо выполнить какие-либо действия только после полной загрузки самого HTML-документа, а также всех других элементов (например, изображений), то можно воспользоваться методом load(). Синтаксис метода таков.

load(<Функция обратного вызова>)

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

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

Выведем подтверждающее сообщение и тип события после полной загрузки веб-страницы.

$(window).load(function(e) {
   alert("Документ полностью загружен");
   alert("Тип события " + e.type);
});

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

Документ полностью загружен
Тип события load

Для выполнения каких-либо действий непосредственно перед выгрузкой документа предназначен метод unload(). Метод имеет следующий синтаксис.

unload(<Функция обратного вызова>)

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

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

Выведем сообщение перед выгрузкой документа.

$(window).unload(function() {
   alert("Заходите еще!");
});

В этом разделе мы рассмотрим еще два полезных метода.

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

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

Обработать прокрутку содержимого окна и вывести сообщение можно так.

$(window).scroll(function() {
   alert("Прокрутка содержимого окна");
});

В качестве примера использования метода resize() получим ширину и высоту окна после изменении его размера (листинг 6.1).

Листинг 6.1. Вывод ширины и высоты окна при изменении размера

<!doctype html>
<html>
<head>
<title>Вывод ширины и высоты окна при изменении размера</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(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>

При изменении размера окна в элементе с идентификатором div1 будет выведена ширина и высота окна.

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

function <Название функции>([<Сообщение>[, <URL>[, <Номер строки>]]]) {
   // ...
}

Если ошибка произошла в объекте window, то в функции обратного вызова будут доступны три параметра:

Чтобы скрыть ошибки JavaScript от пользователей, необходимо внутри функции обратного вызова вернуть значение true.

$(window).error(function(){
   return true;
});

С помощью метода error() можно обработать ошибку загрузки изображения.

$("img").error(function() {
   $(this).attr("src", "noimage.gif");
});

Обратите внимание

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

Предыдущая статья Все статьи Следующая статья