Объект event

Информация о событии: объект Event

В сценариях на JavaScript часто выполняется обработка событий. Объект Event предназначен для сохранения информации о произошедшем событии. Например, для щелчка в нем сохраняется ссылка на целевой объект, информация о координатах щелчка и др. При возникновении события браузер создает экземпляр объекта Event, который существует до тех пор, пока данное событие не будет обработано. Все экземпляры объектов инициированных событий обрабатываются в порядке их наступления.

Здесь рассматриваются типовые варианты доступа к объекту Event и определения того, где произошло событие и какое это событие. Думаю, эта статья поможет начинающим разработчикам.

Доступ к Event

Event является объектом браузера и доступен обработчикам событий по-разному в зависимости от типа браузера. В Internet Explorer 8 и в более ранних версиях экземпляр Event устанавливается как свойство объекта window с названием event и поэтому к нему можно обращаться как window.event или просто по имени event в любом сценарии. В браузерах, поддерживающих DOM 2 (в их числе Firefox, Opera, Safari и Chrome), доступ к объекту Event осуществляется в двух вариантах: Рассмотрим варианты доступа к экземпляру объекта Event более подробно.
В простейшем случае привязки обработчика через атрибут-событие во всех браузерах можно использовать обращение по имени event, например, 
<body onclick="var x=event.screenX; alert('x='+x)">
Здесь код обработчика представлен непосредственно как значение атрибута-события onclick. При щелчке на элементе в диалоговом окне появится сообщение о горизонтальной координате щелчка относительно экрана. Привязанный посредством атрибута-события обработчик обычно определяют в виде функции. В этом случае экземпляр объекта события передают обработчику в качестве параметра как event. Соответствующий пример, работающий во всех браузерах, приведен ниже. 
<html>
<head><title>Объект Event</title>
<script type="text/javascript">
  function myhandler(evt){  // обработчик щелчка
     alert("x="+evt.screenX)
  }
</script>
</head>
<body onclick="myhandler(event)">
Щелкните где-нибудь
</body>
</html>
В браузерах, поддерживающих модель событий DOM 2, при вызове обработчика ему всегда неявно передается соответствующий экземпляр объекта Event. Поэтому в таких браузерах сработает следующий код: 
<html>
<head><title>Объект Event</title></head>
<body>
Щелкните где-нибудь    
</body>
<script type="text/javascript">
  function myhandler(evt){ // обработчик щелчка, не работает в IE
    alert("x="+evt.screenX)
  }
  document.body.onclick=myhandler // регистрация обработчика
</script>
</html>
В данном примере используется регистрация обработчика в сценарии, а сам обработчик определен в виде функции с параметром evt (возможно любое имя переменной). Заметьте, что при регистрации обработчика myhandler явно не указывается, что он принимает параметр, но в определении функции-обработчика это делается (function myhandler(evt) {…}). Однако данный вариант не работает в Internet Explorer, даже если вы укажете в качестве параметра ключевое слово event.

Чтобы получить вариант, который работоспособен во всех браузерах, включая Internet Explorer, достаточно в начале кода обработчика myhandler(evt) вставить следующую строку: 

if (!evt) {if(window.event) evt=window.event; else return true};
Здесь проверяется, не является ли переданное обработчику значение пустым. Если оно пусто (объект события не был передан в качестве параметра), то проверяется доступность свойства event объекта window (для Internet Explorer). Если оно доступно, то назначается переменной evt и далее код обработчика оперирует этим значением, а в противном случае происходит выход из обработчика с возвратом значения true, чтобы не препятствовать выполнению обработчика по умолчанию, если он определен для данного элемента документа. Если вернуть false, то будет отменена обработка события по умолчанию.

Кто является целевым объектом?

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

Для определения целевого объекта в модели событий DOM 2 предусмотрено свойство target объекта Event, а в Internet Explorer — srcElement. Поскольку эти ссылки на целевой объект различны, в обработчике необходимо предусмотреть адаптацию к браузеру.

В следующем примере документ содержит абзац, ссылку и кнопку. 

<html>
<head><title>Объект Event</title></head>
<body id="mybоdy">
<p id="mytext">Щелкните где-нибудь</p>
<a id="myref" href="http://www.yandex.ru">Яндекс</a>
<button id="mybutton">Кнопка</button>    
</body>
<script type="text/javascript">
function myhandler(evt){ // обработчик
  /* Для IE: */
  if (!evt) {if(window.event) evt=window.event; else return true};
  var elem; // переменная для целевого объекта 
  if(evt.srcElement) elem=evt.srcElement // для IE
  else elem=evt.target;                  // для других браузеров
  /* Вместо alert() может быть и другой код */
  alert("Вы щелкнули на элементе id="+elem.id)
}
document.body.onclick=myhandler // регистрация обработчика щелчков
</script>
</html>

Здесь в сценарии зарегистрирован обработчик myhandler щелчка, привязанный к элементу . В обработчике, которому передается экземпляр объекта Event, определяется, какой элемент принял щелчок в качестве целевого объекта и в диалоговом окне выводится значение его атрибута id. Последнее делается лишь для демонстрации того, что мы правильно определили целевой объект. На практике вместо этого можно использовать операторы условного перехода с блоками кода, определяемыми для различных целевых объектов. Данный код сработает в любом браузере, поскольку в нем учтены особенности как передачи экземпляра объекта Event, так и обращения к целевому объекту.

Какое событие произошло?

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

Тип события в моделях DOM 2 и Internet Explorer представляется свойством type объекта Event. Это строка, содержащая название события, но без префикса "on", например, click, mouseover, mouseout и т. п.

В следующем примере для абзаца (элемента <p>) и событий onclick, onmouseover и onmouseout зарегистрирован один и тот же обработчик myhandler. В данном примере обработчик просто выводит в диалоговое окно сообщение о типе произошедшего события.

<html>
<head><title>Объект Event</title></head>
<body>
<p id="mytext">Щелкните где-нибудь</p>
</body>
<script type="text/javascript">
function myhandler(evt){ // обработчик 
  /* Для IE: */
  if (!evt) {if(window.event) evt=window.event; else return true};
  /* Вместо alert() может быть и другой код */
  alert("Произошло событие "+evt.type)
}
/* Регистрация обработчиков событий */
document.getElementById("mytext").onclick=myhandler; 
document.getElementById("mytext").onmouseover=myhandler;
document.getElementById("mytext").onmouseout=myhandler
</script>
</html>