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

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

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

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

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

<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

Координаты курсора в момент клика (относительно окна)

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

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

Особенности 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
  ...
};