Объект события

Чтобы хорошо обработать событие, недостаточно знать о том, что это – «клик» или «нажатие клавиши». Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.

Детали произошедшего браузер записывает в «объект события», который передаётся первым аргументом в обработчик.

Свойства объекта события

Пример ниже демонстрирует использование объекта события:

<input type="button" value="Нажми меня" id="elem">

<script>
  elem.onclick = function(event) {
    // вывести тип события, элемент и координаты клика
    alert(event.type + " на " + event.currentTarget);
    alert(event.clientX + ":" + event.clientY);
  }
</script>

Свойства объекта event:

event.type: Тип события, в данном случае click
event.currentTarget: Элемент, на котором сработал обработчик. Значение – в точности такое же, как и у this, но бывают ситуации, когда обработчик является методом объекта и его this при помощи bind привязан к этому объекту, тогда мы можем использовать event.currentTarget.
event.clientX / event.clientY: Координаты курсора в момент клика (относительно окна)

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

При назначении обработчика в HTML, тоже можно использовать переменную event, это будет работать кросс-браузерно:

<input type="button" onclick="alert(event.type)" value="Тип события">

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) { alert(event.type) }. То есть, её первый аргумент называется "event".

Особенности IE8-

IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event. Обработчик может обратиться к нему.

Работает это так:

          elem.onclick = function() {
  // window.event - объект события
  alert( window.event.clientX );
};
        

Кроссбраузерное решение

Универсальное решение для получения объекта события:

          element.onclick = function(event) {
  event = event || window.event; // (*)

  // Теперь event - объект события во всех браузерах.
};
        

Строка (*), в случае, если функция не получила event (IE8-), использует window.event.-событие event.

Можно написать и иначе, если мы сами не используем переменную event в замыкании:

          element.onclick = function(e) {
  e = e || event;

  // Теперь e - объект события во всех браузерах.
};
        

Итого

Объект события содержит ценную информацию о деталях события.
Он передаётся первым аргументом event в обработчик для всех браузеров, кроме IE8-, в которых используется глобальная переменная window.event.

Кросс-браузерно для JavaScript-обработчика получаем объект события так:

          element.onclick = function(event) {
  event = event || window.event;

  // Теперь event - объект события во всех браузерах.
};
        

Ещё вариант:

          element.onclick = function(e) {
  e = e || event; // если нет другой внешней переменной event
  ...
};
        