Введение

Теперь, когда вы уже не волнуетесь при использовании 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.