События и доступность

Прежде чем погружаться глубже в объяснение, как управлять и вызывать события, хотелось бы подчеркнуть вопрос доступности.

Хотя для большинства людей это достаточно общий термин, он используется здесь, чтобы выразить идею о том, что цели, которые желательно реализовать с помощью обработки событий, должны достигаться, даже когда поддержка JavaScript отключена, или по каким-то другим причинам блокирована в web-браузере.

Некоторые пользователи выключают JavaScript в своих web-браузерах, но чаще всего прокси-серверы, брандмауэры и чрезмерно усердные антивирусные программы не позволяют JavaScript вести себя ожидаемым образом. Пусть это не приводит вас в уныние, моя задача показать, как создавать события, которые имеют резервный доступ в случае недоступности JavaScript.

Обычно никогда не определяйте события в элементах HTML, которые еще не имеют встроенного режима работы для данного определенного события. События onclick необходимо использовать только в таких элементах как a, которые уже имеют резервный механизм для событий щелчка (например, переход в местоположение, определенное в ссылке, или отправка формы).

Управление событиями

Давайте начнем с рассмотрения простого примера события, и того, как можно на него реагировать. Для упрощения изложения воспользуемся упомянутым выше решением addEvent, чтобы избежать погружения в каждом примере в трудности работы с несколькими браузерами.

Первый пример является событием onload, которое принадлежит объекту window. Обычно любые события, которые влияют на окно браузера (такие как onload, onresize и onscroll) доступны через объект window.

Событие onload возникает, когда web-страница полностью загрузится. Это включает сам код HTML, а также внешние зависимости, такие как изображения, файлы CSS и файлы JavaScript. Когда все они закончат загружаться, вызывается window.onload, и можно начинать использовать функции web-страницы. Следующий очень простой пример выводит сообщение, когда загружается страница:

addEvent(window, "load", sayHi);

function sayHi() {

alert("Hello there, stranger!");

}

Не так уж плохо, не так ли? При желании можно использовать вместо этого так называемые анонимные функции, исключая тем самым необходимость использовать имя функции. Например, следующим образом:

addEvent(window, "load", function () {

alert("Hello there, stranger!");

});

Использование событий с определенными элементами

Чтобы двигаться дальше, нужно начинать добавлять события в некоторые другие элементы на странице. Для определенности предположим, что требуется, чтобы событие происходило всякий раз при щелчке на ссылке. Объединяя это с тем, что мы узнали выше, получаем следующий способ решения проблемы:

addEvent(window, "load", function () {

var links = document.getElementsByTagName("a");

for (var i=0; i<links.length; i++) {

addEvent(links[i], "click", function () {

alert("НЕТ! Я вас туда не возьму!");

// Поддержка этой строки добавлена

// с помощью функции addEvent

// См. ниже

evt.preventDefault();

});

}

});

И что же здесь происходит? Сначала мы используем событие onload, чтобы проверить, когда web-страница полностью загрузилась. Затем мы находим все ссылки на странице, используя метод getElementsByTagName объекта document. Когда ссылки на них определены, мы циклически просматриваем все ссылки и используем события, чтобы при щелчке на ссылке происходило какое-то действие. Но что насчет бесцеремонной части "вас туда не возьму"? После вывода предупреждения, строка ниже считывает return false. Это означает, что в этом контексте, возврат false предотвращает действие по умолчанию. Мы рассмотрим другие способы указания, как вести себя событиям, в последнем разделе лекции.