Методы обработки событий документа

В самом начале книги мы уже рассматривали возможность выполнения скриптов сразу после формирования структуры документа, не дожидаясь загрузки других элементов. Как вы уже знаете, обработать это событие можно с помощью метода 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. Вывод ширины и высоты окна при изменении размера
<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>

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *