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

Флэнаган Дэвид
Шрифт:

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, как можно скорее