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

Следующий фрагмент регистрирует два обработчика события «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().

По своему действию методы

attachEvent()

detachEvent()

похожи на методы

addEventListener()

removeEventListener()

со следующими исключениями:

• Поскольку модель событий в IE не поддерживает фазу перехвата, методы

attachEvent()

detachEvent()

принимают только два аргумента: тип события и функцию обработчика.

• В первом аргументе методам в IE передается имя свойства обработчика с префиксом «on», а не тип события без этого префикса. Например, методу

attachEvent()

должно передаваться имя «опсііск», тогда как методу

addEventListener()

должно передаваться имя «click».

• Метод

attachEvent()

позволяет зарегистрировать одну и ту же функцию обработчика несколько раз. При возникновении события указанного типа зарегистрированная функция будет вызвана столько раз, сколько раз она была зарегистрирована.

Ниже показано, как обычно выполняется регистрация обработчика с помощью метода

addEventListener() 

в броузерах, поддерживающих его, и с помощью метода

attachEvent()

в других броузерах:

var b = document.getElementByldC'mybutton"); 

var handler = function() { alert("Спасибо!"); }; 

if (b.addEventListener)

 b.addEventListener("click", handler, false); 

else if (b.attachEvent)

 b.attachEvent("onclick", handler);

17.3. Вызов обработчиков событий

После регистрации обработчика событий веб-броузер будет вызывать его автоматически, когда в указанном объекте будет возникать событие указанного типа. В этом разделе подробно описывается порядок вызова обработчиков событий, аргументы обработчиков, контекст вызова (значение

this

), область видимости и назначение возвращаемого значения обработчика. К сожалению, некоторые из этих подробностей отличаются между IE версии 8 и ниже и другими броузерами.

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

17.3.1. Аргумент обработчика событий

При вызове обработчика событий ему обычно (за одним исключением, о котором рассказывается ниже) передается объект события в виде единственного аргумента. Свойства объекта события содержат дополнительную информацию о событии. Свойство

type

, например, определяет тип возникшего события. В разделе 17.1 упоминалось множество других свойств объекта события для различных типов событий.

В IE версии 8 и ниже обработчикам событий, зарегистрированным установкой свойства, объект события при вызове не передается. Вместо этого объект события сохраняется в глобальной переменной

window.event

. Для переносимости обработчики событий можно оформлять, как показано ниже, чтобы они использовали переменную

window.event

при вызове без аргумента: