Обработка событий с помощью JavaScript

Введение

Теперь, когда вы уже не волнуетесь при использовании CSS для оформления и компоновки страницы, и сделали свои первые неуверенные шаги к пониманию переменных, функций, методов, и т.д. в JavaScript, пришло время использовать эти знания для создания для посетителей сайта интерактивного и динамичного внешнего представления (таких вещей как буксировка, анимация, и т.д.). Управление событиями с помощью JavaScript позволяет выступить в роли доктора Франкенштейна и действительно оживить свои создания!

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

• Что такое событие?
• Как работают события
• Эволюция событий
  • События DOM level 2
  • Исключение для модели событий Internet Explorer
  • Использование событий в различных браузерах
• События и доступность
• Управление событиями
  • Использование событий с определенными элементами
• Ссылки на объект события
  • Проверка специфического свойства события
• Поведение события по умолчанию и всплытие событий
  • Предотвращение поведения событий по умолчанию
  • Остановка всплытия событий
• Законченный пример обработки событий
• Заключение
• Контрольные вопросы

Помните, что код примера для этой лекции можно загрузить и проверить его в работе самостоятельно (http://dev.opera.com/articles/view/handling-events-with-javascript/code-example.zip).

Что такое событие?

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

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

Как работают события

Когда на web-странице в элементе HTML происходят события, страница проверяет, не присоединены ли к нему какие-либо обработчики событий. Если ответ положительный, она вызывает их в соответственном порядке, посылая при этом ссылки и дополнительную информацию для каждого происходящего события. Затем на событие действуют обработчики событий.

Существует два типа управления событиями: перехват события и всплытие события.

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

Всплытие событий действует точно противоположным образом: оно начинается с проверки цели события на наличие присоединенных обработчиков событий, а затем поднимается через все соответствующие элементы-предки, пока не будет достигнут элемент HTML.

Эволюция событий

При появлении JavaScript обработчики событий использовались непосредственно внутри элемента HTML, следующим образом:

<a href="http://www.opera.com/" onclick="alert('Hello')">Say hello</a>

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

Следующий шаг в эволюции событий состоял в использовании событий изнутри блока JavaScript, например:

<script type="text/javascript">
  document.getElementById("my-link").onclick = waveToAudience;
    function waveToAudience() {
      alert("Waving like I've never waved before!");
    }
</script>

<a id="my-link" href="http://www.opera.com/">My link</a>

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

События DOM level 2

В ноябре 2000 года, консорциум W3C опубликовал Спецификацию событий объектной модели документа ( DOM ) Level 2, предлагающую более детальный и точный способ управления событиями на web-странице. Новый способ применения событий в элементах HTML выглядит следующим образом:

document.getElementById("my-link").addEventListener("click", myFunction, false);

Первый параметр метода addEventListener является именем события, и нужно отметить, что теперь больше не используется префикс "on". Второй параметр является ссылкой на функцию, которую надо вызвать, когда происходит событие. Третий параметр управляет так называемым useCapture для события, т.е. должен ли использоваться перехват события или всплытие события.

Противоположной для функции addEventListener будет removeEventListener, которая удаляет любое заданное событие из элемента HTML.

Исключение для модели событий Internet Explorer

К сожалению Internet Explorer до сих пор не реализовал модель событий DOM Level 2, и вместо этого использует свой собственный проприетарный метод attachEvent. В действии он выглядит следующим образом:

document.getElementById("my-link").attachEvent("onclick", myFunction);

Отметим, что attachEvent по прежнему использует префикс "on" перед именем фактического события, и не содержит никакой поддержки для решения фазы перехвата.

Противоположной для функции attachEvent будет detachEvent, которая удаляет любое заданное событие из элемента HTML.

Использование событий в различных браузерах

При несогласованности между различными браузерами в реализации обработки событий, web-разработчиками были предприняты многочисленные попытки предложить хорошее решение для успешного использования событий во всех основных браузерах. Эти решения имеют различные аргументы за и против и обычно называются функциями addEvent.

Большинство основных библиотек JavaScript имеют встроенные решения, и существует также ряд автономных решений, доступных в сети. Одним из предложений является использование addEvent Дина Эдвардса (http://dean.edwards.name/weblog/2005/10/add-event/); необходимо также посмотреть что-нибудь типа средств обработки событий в библиотеке jQuery JavaScript (http://docs.jquery.com/Events).

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

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

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