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

При взаимодействии пользователя с веб-страницей происходят события. События — это своего рода извещения системы о том, что пользователь выполнил какое-либо действие или внутри самой системы возникло некоторое условие. События возникают в результате щелчка на элементе, перемещения мыши, нажатия клавиши клавиатуры, изменения размеров окна, окончания загрузки веб-страницы и т. д. Зная, какие события может генерировать тот или иной элемент веб-страницы, можно написать функцию для обработки этого события. Например, при отправке данных формы возникает событие 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("Заходите еще!");
});

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

  • resize(<Функция обратного вызова>) — выполняется при изменении размера окна.
  • scroll(<Функция обратного вызова>) — выполняется при прокручивании содержимого элемента страницы, документа, окна или фрейма.

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

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, то в функции обратного вызова будут доступны три параметра:

  • <Сообщение> — текст, описывающий ошибку;
  • <URL> — полный URL-адрес документа с ошибкой;
  • <Номер строки> — номер строки с ошибкой.

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

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

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

$("img").error(function() {
   $(this).attr("src", "noimage.gif");
});
Обратите внимание

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе