Следующий фрагмент регистрирует два обработчика события «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
в броузерах, поддерживающих его, и с помощью метода
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
. Для переносимости обработчики событий можно оформлять, как показано ниже, чтобы они использовали переменную