Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Обработка событий
При взаимодействии пользователя с 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
будет выведена ширина и высота окна.
Реквизиты
ЮMoney: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов