Обработчики событий в объектах документа

Интерактивный HTML_документ и находящиеся в нем элементы должны реаги_ ровать на пользовательские события. Мы кратко обсуждали события и их обра_ ботчики в главе 13, в которой познакомились с несколькими примерами про_ стых обработчиков. В этой главе имеется намного больше примеров обработчи_ ков событий, т. к. они играют ключевую роль во взаимодействии объектов доку_ мента с JavaScript_кодом.

322 Глава 15. Работа с документами

К сожалению, мы должны отложить полноценное обсуждение событий и обра_ ботчиков событий до главы 17. А сейчас вспомните, что обработчики событий определяются атрибутами HTML_элементов, такими как onclick и onmouseover. Значениями этих атрибутов должны быть строки JavaScript_кода, который ис_ полняется всегда, когда с HTML_элементом происходит указанное событие.

Объекты документа, доступные через такие коллекции, как document.links, обла_ дают свойствами, соответствующими атрибутам HTML_тегов. Объект Link, на_ пример, имеет свойство href, которое соответствует атрибуту href тега <a>. То же самое относится и к обработчикам событий. Определить обработчик события on_ click гиперссылки можно либо с помощью атрибута onclick тега <a>, либо устано_ вив значение свойства onclick объекта Link. В качестве другого примера рассмот_ рим атрибут onsubmit элемента <form>. В JavaScript у объекта Form есть соответст_ вующее свойство onsubmit. (Помните, что язык HTML нечувствителен к регист_ ру, и атрибуты могут быть записаны в нижнем, верхнем или смешанном регистре. В JavaScript имена всех свойств обработчиков событий должны быть записаны в нижнем регистре.)

В HTML обработчики событий определяются путем присваивания строки, содер_ жащей JavaScript_код, атрибуту_обработчику события. В JavaScript они опреде_ ляются путем присваивания функции свойству_обработчику события. Рассмот_ рим следующий тег <form> и его обработчик события onsubmit:

<form name="myform" onsubmit="return validateform();">...</form>

В JavaScript вместо строки JavaScript_кода, вызывающей функцию и возвра_ щающей ее результат, можно непосредственно присвоить функцию свойству_об_ работчику события:

document.myform.onsubmit = validateform;

Обратите внимание: после имени функции не указаны скобки. Дело в том, что здесь мы не хотим вызывать функцию, а просто присваиваем ссылку на нее.

Полное описание такого способа назначения обработчиков событий приводится в главе 17.

Пример использования ранней версии DOM

В примере 15.1 приводится функция listanchors(), которая открывает новое ок_ но и использует метод document.write() для вывода списка всех якорных элемен_ тов в оригинальном документе. Каждая запись в списке – это ссылка с обработ_ чиком события, выполняющим прокрутку оригинального окна в позицию за_ данного якорного элемента. Программный код этого примера будет особенно по_ лезен, если вы при создании своих HTML_документов вставляете заголовки разделов, отмеченные якорными элементами:

<a name="sect14.6"><h2>Объект Anchor</h2></a>

Обратите внимание: функция listanchors() пользуется методом Window.open(). Как было показано ранее, броузеры обычно блокируют всплывающие окна, если те не создаются в ответ на действия пользователя. Поэтому вызов listanchors() лучше вставить в обработчик события щелчка на кнопке или на ссылке, а не вы_ зывать его автоматически по окончании загрузки страницы.

Пример 15.1. Список всех якорных элементов

/*

* listanchors.js: Создает простое оглавление с помощью document.anchors[].

*

* Функция listanchors() получает документ в качестве аргумента и открывает

* новое окно, которое выступает в роли "окна навигации" по этому документу.

* Новое окно отображает список всех якорных элементов документа.

* Щелчок на любой записи из списка вызывает прокрутку документа

* в позицию заданного якорного элемента.

*/

function listanchors(d) { // Открыть новое окно

var newwin = window.open("", "navwin", "menubar=yes,scrollbars=yes,resizable=yes," + "width=500,height=300");

// Установить заголовок

newwin.document.write("<h1>Окно навигации: " + d.title + "</h1>");

// Перечислить все якорные элементы for(var i = 0; i < d.anchors.length; i++) {

// Для каждого якорного элемента нужно получить текст для отображения

// в списке. В первую очередь надо попытаться получить текст, расположенный

// между тегами <a> и </a>, с помощью свойства, зависящего от типа броузера.

// Если текст отсутствует, тогда использовать значение свойства name.

// Теперь вывести этот текст в виде ссылки. Свойство href этой ссылки

// использоваться не будет: всю работу выполняет обработчик события

// onclick, он устанавливает свойство location.hash оригинального

// окна, что вызывает прокрутку окна до заданного якорного элемента.

// См. описание свойств Window.opener, Window.location,

// Location.hash и Link.onclick.

newwin.document.write('<a href="#' + a.name + '"' +

' onclick="opener.location.hash=\'' + a.name + '\'; return false;">');

newwin.document.write(text);

newwin.document.write('</a><br>');

}

newwin.document.close( ); // Никогда не забывайте закрывать документ!

}