Шрифт:
Другим важным множеством свойств объектов
Window
, Document
и Element
являются свойства, ссылающиеся на обработчики событий. Они позволяют сценариям определять функции, которые должны вызываться асинхронно при возникновении определенных событий. Обработчики событий позволяют программам на языке JavaScript изменять поведение окон, документов и элементов, составляющих документы. Свойства, ссылающиеся на обработчики событий, имеют имена, начинающиеся с «on», и могут использоваться, как показано ниже:
// Обновить содержимое элемента timestamp, когда пользователь щелкнет на нем
timestamp.onclick = function { this.innerHTML = new Date.toString; }
Одним из наиболее важных обработчиков событий является обработчик
onload
объекта Window
. Это событие возникает, когда содержимое документа, отображаемое в окне, будет загружено полностью и станет доступно для выполнения манипуляций. Программный код на языке JavaScript обычно заключается в обработчик события onload
. События являются темой главы 17. Пример 13.1 использует обработчик onload
и демонстрирует дополнительные приемы получения ссылок на элементы документа, изменения классов CSS и определения обработчиков других событий в клиентском JavaScript. В этом примере программный код на языке JavaScript заключен в HTML-тег <script>
. Подробнее этот тег описывается в разделе 13.2. Обратите внимание, что в этом примере имеется определение функции, заключенное в определение другой функции. Вложенные функции часто используются в клиентских сценариях на языке JavaScript, особенно в виде обработчиков событий. Пример 13.1. Простой клиентский сценарий на языке JavaScript, исследующий содержимое документа
<!DOCTYPE html>
<html>
<head>
<style>
/* Стили CSS для этой страницы */
.reveal * { display: none: } /* Элементы с атрибутом class="reveal" невидимы */
.reveal *.handle { display: block;} /* Кроме элементов c class= "handle" */
</style>
<script>
// Ничего не делать, пока документ не будет загружен полностью
window.onload = function {
// Отыскать все контейнерные элементы с классом "reveal"
var elements = document.getElementsByClassName("reveal");
for(var i = 0; i < elements.length; i++) { // Для каждого такого элемента...
var elt = elements[i];
// Отыскать элементы с классом "handle" в контейнере
var title = elt.getElementsByClassName("handle")[0];
// После щелчка на этом элементе сделать видимым остальное содержимое
addRevealHandler(title, elt);
}
function addRevealHandler(title, elt) {
title.onclick = function {
if (elt.className == "reveal") elt.className = "revealed";
else
if (elt.className == "revealed") elt.className = "reveal";
}
}
};
</script>
</head>
<body>
<div class="reveal">
<h1 class="handle">Щелкните здесь, чтобы увидеть скрытый текст</h1>
Этот абзац невидим. Он появляется после щелчка на заголовке.
</div>
</body>
</html>
Во введении к этой главе отмечалось, что некоторые веб-страницы ведут себя как документы, а некоторые - как приложения. Следующие два подраздела исследуют применение JavaScript в обоих типах веб-страниц.
13.1.1. Сценарии JavaScript в веб-документах
Программы на языке JavaScript могут манипулировать содержимым документа через объект
Document
и содержащиеся в нем объекты Element
. Они могут изменять визуальное представление содержимого, управляя стилями и классами CSS, и определять поведение элементов документа, регистрируя соответствующие обработчики событий. Комбинация управляемого содержимого, представления и поведения называется динамическим HTML (Dynamic HTML, или DHTML), а приемы создания документов DHTML описываются в главах 15, 16 и 17.