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

При появлении 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).