JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

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

на обложку

Флэнаган Дэвид

Шрифт:

События и обработка событий - это тема главы 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.