JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

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

document.removeEventListener("mousemove", handleMouseMove, true);

document.removeEventListener("mouseup", handleMouseUp, true);

17.2.4. attachEvent

Internet Explorer версии ниже IE9 не поддерживает методы

addEventListener
и
removeEventListener.
В версии IE5 и выше определены похожие методы,
attachEvent
и
detachEvent.