Реагирование на события в JavaScript
21 Июль 2008, 10:46
Реагирование на события в JavaScript может быть организовано разными способами.
с помощью атрибута HTML: <body onload=”xyz();”>
с помощью атрибута onXXX, доступного в JavaScript: window.onload = xyz;
Однако в браузерах реализованы разные, конкурирующие механизмы обработки событий. Так, в Internet Explorer поддерживается присоединение событий к элементу с помощью метода attachEvent(). В этом случае имя события равнозначно имени атрибута HTML, поэтому, в частности, используется обозначение “onload”, хотя само событие называется “load”.
Во всех остальных браузерах поддерживается метод addEventListener(), являющийся составной частью модели W3C. В данном случае указывается имя события, поэтому вместо “onload” используется обозначение “load”.
В следующем примере показано, каким образом событие присоединяется к кнопке с учетом типа браузера:
<script type="text/javascript">
function eventHandler() {
window.alert("Event fired!");
}
window.onload = function() {
var button = document.getElementById("eventButton");
if (button.addEventListener) {
button.addEventListener("click", eventHandler, false);
} else if (button.attachEvent) {
button.attachEvent("onclick", eventHandler);
}
};
</script>
<input type="button" id="eventButton" value="Click me!" />
Обработчики событий можно также удалить. Для этой цели в Internet Explorer служит метод detachEvent(), тогда как в остальных браузерах этот метод называется removeEventListener() в соответствии с моделью W3C.
Всплывание событий
Обработка событий в браузерах осуществляется в соответствии с одним из двух принципов. Так, в Internet Explorer применяется принцип так называемого всплывания событий: событие сначала запускается из того элемента, где оно наступает, а затем оно всплывает вверх по структуре модели DOM. Следовательно, фиксировать такое событие и реагировать на него можно в самых разных местах документа. Рассмотрим для примера следующую разметку документа:
<div><p><em>JavaScript</em> Phrasebook</p></div>
Если курсор мыши оказывается над текстом JavaScript, то событие mouseover сначала запускается в элементе <em>, а затем всплывает вверх до элементов <p> и <div>.
В конкурирующей модели W3C, которая поддерживается в браузерах Mozilla и Opera, события сначала погружаются вниз до целевого элемента, а затем всплывают вверх. Следовательно, в приведенном выше примере событие сначала опускается последовательно от элемента <div> до элементов <p> и <em>, а затем всплывает вверх до элементов <p> и <div>. При вводе процесса прослушивание событий в качестве третьего параметра функции addEventListener() можно указать порядок перехвата события: во время его погружения (логическое событие true) или всплывания (логическое событие false).
После того, как событие будет перехвачено, его погружение или всплывание можно прекратить. В Internet Explorer для этой цели свойству canselBubble присваивается логическое значение false:
window.event.canselBubble = false;
В модели W3C поддерживается метод stopPropagation():
e.stopPropagation();
Как видите, в Internet Explorer текущее событие всегда доступно посредством свойства window.event, тогда как в остальных браузерах событие автоматически воспринимается в качестве параметра (в данном случае e) функции прослушивания событий.
