Получение объекта события

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

В обработчике его можно получить и прочитать детали произошедшего из его свойств.

Разные типы событий, предоставляют разные свойства. Например, объект события onclick содержит:

• event.type = "click" — тип события
• event.target — элемент, по которому кликнули. В IE вместо него используется свойство event.srcElement.
• event.clientX / event.clientY - координаты курсора в момент клика.
• … Также есть информация о том, какой кнопкой был произведен клик, и другие свойства. Мы разберем их все позже.

Сейчас, наша задача - получить объект события. Есть два пути решения.

Путь W3C

Браузеры, которые следуют стандартам W3C всегда передают объект события первым аргументом в обработчик.

Для примера:

element.onclick = function(event) {
 //обработка данных события
}

Можно и с внешней функцией:

function doSomething(event) {
  // мы получили событие
}

element.onclick = doSomething

Путь IE<9

IE<9 вместо передачи параметра обработчику создает глобальный объект window.event, который ссылается на последнее событие.

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

// обработчик без аргументов
element.onclick = function() {
  // window.event - объект события
}

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

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

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

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

Здесь все браузеры передадут аргумент-событие event, а IE создаст window.event, соответственно в строчке (*) будет использовано то, что есть.

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

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

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

Итого

Объект события содержит ценную информацию о деталях события.

Он передается первым аргументом в обработчик для большинства браузеров и с помощью window.event в IE.

Итак, для JavaScript-обработчика используем:

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

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

Еще вариант:

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