Книга: JavaScript. Подробное руководство, 6-е издание

13.3.2. Выполнение, управляемое событиями

13.3.2. Выполнение, управляемое событиями

Древняя JavaScript-программа, представленная в примере 13.3, является синхронной: она запускается на выполнение в процессе загрузки страницы, производит вывод и завершается. Такие программы редко используются в наши дни. Программы, которые пишутся в настоящее время, регистрируют функции обработчиков событий. Эти функции вызываются асинхронно, по событиям, для обработки которых они были зарегистрированы. Веб-приложения, в которых требуется реализовать поддержку горячих комбинаций клавиш для выполнения типичных операций, могут, например, регистрировать обработчики событий нажатия клавиш. Даже неинтерактивные программы используют события. Представьте, что требуется написать программу, которая должна проанализировать структуру документа и автоматически сгенерировать оглавление. В этом случае не требуется обрабатывать события, возникающие в результате действий пользователя, однако программа все же должна зарегистрировать обработчик события onload, чтобы поймать момент, когда закончится загрузка документа и он будет готов к созданию оглавления.

События и обработка событий - это тема главы 17, а данный раздел содержит лишь краткий обзор. События имеют имена, такие как «click», «change», «load», «mouseover», «keypress» или «readystatechange», указывающие общий тип события. События также имеют адресата - объект, в котором возникло событие. Ведя речь о событии, необходимо указывать не только его тип (имя), но и адресата, например: событие «click» в объекте НТМLButtonelement или событие «readystatechange» в объекте XMLHttpRequest.

Если необходимо, чтобы программа откликалась на какое-то событие, необходимо написать функцию, которая называется «обработчиком событий», «приемником событий» или просто «функцией обратного вызова». После этого функции нужно зарегистрировать, чтобы она вызывалась при появлении события. Как отмечалось выше, это можно сделать с помощью HTML-атрибутов, но такое смешивание JavaScript-кода с разметкой HTML может приводить к путанице. Поэтому обычно лучше регистрировать обработчики событий путем присваивания JavaScript-функций свойствам целевого объекта, как показано ниже:

window.onload = function() { ... };
document.getElementById("button1").onclick = function() { ... };
function handleResponse() { ... }
request.onreadystatechange = handleResponse;

Обратите внимание, что свойства обработчиков событий имеют имена, которые в соответствии с соглашениями начинаются с префикса «on», за которым следует имя события. Отметьте также, что в примере выше не производится вызов функций: здесь выполняется присваивание функций соответствующим свойствам. Броузер автоматически будет вызывать эти функции при появлении событий. При создании асинхронных обработчиков событий часто используются вложенные функции, и на практике достаточно часто приходится писать программный код, который определяет функции внутри функций, вложенных в другие функции.

В большинстве броузеров для большинства типов событий обработчики получают в виде аргумента объект, свойства которого содержат информацию о событии. Например, объект, передаваемый обработчику события «click», будет иметь свойство, определяющее кнопку мыши, которой был выполнен щелчок. (В IE информация о событии хранится в глобальном объекте и не передается функции-обработчику.) Иногда значение, возвращаемое обработчиком события, используется, чтобы определить, достаточно ли ограничиться выполненной обработкой события и следует ли предотвратить выполнение действий по умолчанию, предусматриваемых броузером.

События, адресатом которых является элемент документа, часто распространяются вверх по дереву документа и этот процесс называется «всплытием». Если, например, пользователь щелкнет мышью на элементе <button>, событие «click» будет передано кнопке. Если это событие останется необработанным (и его распространение не будет остановлено) функцией, зарегистрированной в элементе кнопки, событие всплывет до элемента, в который вложена эта кнопка, и будет вызван обработчик события «click», зарегистрированный в этом контейнерном элементе.

Если для одного элемента требуется зарегистрировать более одного обработчика единственного события или если требуется написать модуль, который мог бы безопасно регистрировать обработчики событий, даже если для этих же событий и в этих же объектах уже были зарегистрированы обработчики другим модулем, можно воспользоваться другим приемом регистрации обработчиков. Большинство объектов, которые могут выступать в роли адресата события, имеют метод с именем addEventListener(), который позволяет регистрировать множество обработчиков:

window.addEventListener("load", function() {...}, false);
request.addEventListener("readystatechange", function() {...}, false);

Обратите внимание, что первым аргументом этой функции передается имя события. Несмотря на то что метод addEventListener() был определен стандартом уже более десяти лет тому назад, корпорация Microsoft только недавно реализовала его в IE9. В IE8 и в. более ранних версиях необходимо использовать похожий метод, который называется attachEvent():

window.attachEvent("onload", function() {...});

Подробнее о функциях addEventlistener() и attachEvent() рассказывается в главе 17.

Клиентские JavaScript-программы используют еще одну разновидность асинхронных извещений, которые, строго говоря, не являются событиями. Если свойству onerror объекта Window присвоить функцию, она будет вызываться при появлении ошибочных ситуаций (или необработанных исключений) в программном коде (раздел 14.6). Кроме того, функции setTimeout() и setlnterval() (они являются методами глобального объекта Window и потому в клиентском JavaScript считаются глобальными функциями) вызывают указанные им функции по истечении определенного интервала времени. Функции, которые передаются setTimeout(), регистрируются не так, как настоящие обработчики событий, и обычно они называются «функциями обратного вызова», а не «обработчиками», но они, как и обработчики событий, выполняются асинхронно. Подробнее о функциях setTimeout() и setlnterval() рассказывается в разделе 14.1.

Пример 13.5 демонстрирует применение функций setTimeout(), addEventListener() и attachEvent() внутри функции onLoad(), которая регистрирует обработчик события окончания загрузки документа. onLoad() - весьма полезная функция, и мы часто будем использовать ее в примерах на протяжении оставшейся части книги.

Пример 13.5. onLoad(): вызов функции по окончании загрузки документа

// Регистрирует функцию f, которая должна вызываться по окончании загрузки документа.
// Если документ уже загружен, функция f будет вызвана асинхронно и в кратчайшие сроки,
function onLoad(f) {
  if (onLoad.loaded) // Если документ уже загружен
    window.setTimeout(f, 0); // Вызвать f, как можно скорее
  else if (window.addEventListener) // Стандартный метод регистрации событий
    window.addEventListener("load", f, false);
  else if (window.attachEvent) // В IE8 и в более ранних версиях
    window.attachEvent("onload", f); // используется этот метод
}
// Сначала установить флаг, указывающий, что документ еще не загружен.
onLoad.loaded = false;
// И зарегистрировать функцию, которая сбросит флаг после загрузки документа.
onLoad(function() { onLoad.loaded = true; });

Оглавление книги