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

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

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

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

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

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

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

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

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

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

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

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

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