Если значение HTML-атрибута обработчика события состоит из нескольких Java-Script-инструкций, они должны отделяться точками с запятой либо значение атрибута должно располагаться в нескольких строках.
Некоторые типы событий предназначены для броузера в целом, а не для какого-то конкретного элемента документа. Обработчики таких событий в языке JavaScript регистрируются в объекте
Window
. В разметке HTML они должны помещаться в тег
<body>,
но броузер зарегистрирует их в объекте
Window
. Ниже приводится полный список таких обработчиков событий, определяемых проектом спецификации HTML5:
onafterprint onfocus ononline onresize
onbeforeprint onhashchange onpagehide onstorage
onbeforeunload onload onpageshow onundo
onblur onmessage onpopstate onunload
onerror onoffline onredo
Когда
в качестве значения атрибута обработчика события в разметке HTML указывается строка с программным кодом на языке JavaScript, броузер преобразует эту строку в функцию, которая будет выглядеть примерно так:
function(event) {
with(document) {
with(this.form || {}) {
with(this) {
/* ваш программный код */
}
}
}
}
Если броузер поддерживает стандарт ES5, функция определяется в нестрогом режиме (раздел 5.7.3). Мы еще встретимся с аргументом
event
и инструкциями
with
, когда будем рассматривать вызов обработчиков событий в разделе 17.3.
При разработке клиентских сценариев обычно принято отделять разметку HTML от программного кода на языке JavaScript. Программисты, следующие этому правилу, избегают (или, по крайней мере, стараются избегать) использовать HTML-атрибуты обработчиков событий, чтобы не смешивать программный код на языке JavaScript и разметку HTML.
17.2.3. addEventListener
В стандартной модели событий, поддерживаемой всеми броузерами, кроме IЕ версии 8 и ниже, целью события может быть любой объект - включая объекты
Window
и
Document
и все объекты
Elements
элементов документа - определяющий метод с именем
addEventListener
, с помощью которого можно регистрировать обработчики событий для этой цели. Метод
addEventListener
принимает три аргумента. Первый - тип события, для которого регистрируется обработчик. Тип (или имя) события должен быть строкой и не должен включать префикс «on», используемый при установке свойств обработчиков событий. Вторым аргументом методу
addEventListener
передается функция, которая должна вызываться при возникновении события указанного типа. В последнем аргументе методу
addEventListener
передается логическое значение. Обычно в этом аргументе передается значение false. Если передать в нем значение true, функция будет зарегистрирована как перехватывающий обработчик и будет вызываться в другой фазе распространения события. Более подробно фаза перехвата событий будет рассматриваться в разделе 17.3.6. Спецификация со временем может измениться так, что будет допустимо опускать третий аргумент вместо того, чтобы явно передавать в нем значение false, но на момент написания этих строк отсутствие третьего аргумента в некоторых текущих броузерах приводила к ошибке.
Следующий фрагмент регистрирует два обработчика события «click» в элементе
<button>
. Обратите внимание на различия двух используемых приемов:
<button id="mybutton''>Щелкни на Mнe</button>
<script>
var b = document.getElementById("mybutton");
b.onclick = function {
alert("Спасибо, что щелкнули на мне!");
};
b.addEventListener("click", function { alert(Еще
раз спасибо!"); }, false);
</script>
Вызов метода
addEventListener
со строкой «click» в первом аргументе никак не влияет на значение свойства
onclick
. Во фрагменте, приведенном выше, щелчок на кнопке приведет к выводу двух диалогов
alert.
Но важнее то, что метод
addEventListener
можно вызвать несколько раз и зарегистрировать с его помощью несколько функций-обработчиков для одного и того же типа события в том же самом объекте. При появлении события в объекте будут вызваны все обработчики, зарегистрированные для этого типа события, в порядке их регистрации. Многократный вызов метода
addEventListener
для одного и того же объекта с теми же самыми аргументами не дает никакого эффекта - функция-обработчик регистрируется только один раз и повторные вызовы не влияют на порядок вызова обработчиков.
Парным к методу
addEventListener
является метод
removeEventListener,
который принимает те же три аргумента, но не добавляет, а удаляет функцию-обработчик из объекта. Это часто бывает удобно, когда необходимо зарегистрировать временный обработчик события, а затем удалить его в какой-то момент. Например, при получении события «mousedown» может потребоваться зарегистрировать временный перехватывающий обработчик событий «mousemove» и «mouseup», чтобы можно было наблюдать за тем, как пользователь выполняет буксировку объектов мышью, а по событию «mouseup» эти обработчики могут удаляться. В такой ситуации реализация удаления обработчиков событий может иметь вид, как показано ниже:
Internet Explorer версии ниже IE9 не поддерживает методы
addEventListener
и
removeEventListener.
В версии IE5 и выше определены похожие методы,
attachEvent
и
detachEvent.
По своему действию методы
attachEvent
и
detachEvent
похожи на методы
addEventListener
и
removeEventListener
со следующими исключениями:
• Поскольку модель событий в IE не поддерживает фазу перехвата, методы
attachEvent
и
detachEvent
принимают только два аргумента: тип события и функцию обработчика.
• В первом аргументе методам в IE передается имя свойства обработчика с префиксом «on», а не тип события без этого префикса. Например, методу
attachEvent
должно передаваться имя «опсііск», тогда как методу
addEventListener
должно передаваться имя «click».
• Метод
attachEvent
позволяет зарегистрировать одну и ту же функцию обработчика несколько раз. При возникновении события указанного типа зарегистрированная функция будет вызвана столько раз, сколько раз она была зарегистрирована.
Ниже показано, как обычно выполняется регистрация обработчика с помощью метода
addEventListener
в броузерах, поддерживающих его, и с помощью метода