cpp

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

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

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

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

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

Если в качестве параметра функции $() указать ссылку на функцию, то она также будет выполнена сразу после формирования структуры документа:

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

Можно также воспользоваться функцией $.when() в сочетании с $.ready:

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

Если необходимо выполнить какие-либо действия только после полной загрузки самого HTML-документа, а также всех других элементов (например, изображений), то можно назначить обработчик для события onload с помощью метода on():

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

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

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

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

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

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

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

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

  • onbeforeunload — событие перед выгрузкой документа. Если внутри обработчика вернуть строку, то Web-браузер выведет окно, в котором пользователю будет предложено остаться;
  • onunload — событие непосредственно перед выгрузкой документа. Генерируется после события onbeforeunload.

Название события в первом параметре метода on() указывается без префикса on. Выведем сообщение перед выгрузкой документа:

$(window).on('beforeunload', function(e) {
   return "Вы действительно хотите уйти?";
});

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

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

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

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

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

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

Для назначения обработчиков можно также воспользоваться методом on():

$(window).on('resize', function() {
   console.log('Изменение размеров окна');
});
$(window).on('scroll', function() {
   console.log('Прокрутка содержимого окна');
});

Параметр <Данные> позволяет передать пользовательские данные в обработчик. Получить эти данные можно с помощью свойства data объекта события:

$(window).scroll('myData', function(e) {
   console.log('Прокрутка содержимого окна ' + e.data);
});

Если в методах resize() и scroll() параметры не указаны, то будут вызваны обработчики. Сгенерируем события onresize и onscroll после нажатия кнопки с идентификатором btn1:

$('#btn1').click( function() {
   $(window).resize().scroll();
});

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

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

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Вывод ширины и высоты окна при изменении размера</title>
</head>
<body>
   <div id="log"></div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $(window).resize( function() {
      var w = $(window);
      $('#log').html( 'Ширина: ' + w.width() + '<br>' + 
                      'Высота: ' + w.height() );
   });
});
</script>
</body>
</html>

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

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

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

cpp