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

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

Давайте начнем с рассмотрения простого примера события, и того, как можно на него реагировать. Для упрощения изложения воспользуемся упомянутым выше решением 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 предотвращает действие по умолчанию. Мы рассмотрим другие способы указания, как вести себя событиям, в последнем разделе лекции.