Оглавление

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

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

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

 

 HTML

<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in
culpa qui
officia deserunt mollit anim id est laborum. </div> <div id="other"> Запуск обработчика </div>

 

 JS

$('#target').scroll(function() {
$('#log').append('<div>Прокрутка окна.</div>');
});

   
В качестве примера использования метода 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>

 

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

 
Метод error(<Функция обратного вызова>) вызывается при наличии ошибки на странице или в коде JavaScript. В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.
 function <Название функции>([<Сообщение>[, <URL>[, <Номер строки>]]]){
  // ...

 }
Если ошибка произошла в объекте window, то в функции обратного вызова будут доступны три параметра:
• <Сообщение> — текст, описывающий ошибку;
• <URL> — полный URL-адрес документа с ошибкой;
• <Номер строки> — номер строки с ошибкой.
Чтобы скрыть ошибки JavaScript от пользователей, необходимо внутри функции обратного вызова вернуть значение true.

  $(window).error(function(){

    return true;

  });

 

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

  $("img").error(function() {

    $(this).attr("src", "noimage.gif");  

  });

 

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