Объект "событие" (event)

Источник: http://javascript.ru/tutorial/events/intro#obekt-sobytie-event

Объект событие всегда передается обработчику и содержит массу полезной информации о том где и какое событие произошло.

Способов передачи этого объекта обработчику существует ровно два, и они зависят от способа его установки и от браузера.

W3C

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

Например:

function doSomething(event) {
    // event - будет содержать объект события
}

element.onclick = doSomething;

При вызове обработчика объект события event будет передан ему первым аргументом.

Можно назначить и вот так:

element.onclick = function(event) {
    // event - объект события
}

Интересный побочный эффект - в возможности использования переменной event при назначении обработчика в HTML:

<input type="button" onclick="alert(event)" value="Жми сюда не ошибешься"/>

Это работает благодаря тому, что браузер автоматически создает функцию-обработчик с данным телом, в которой первый аргумент event.

Internet Explorer

В Internet Explorer существует глобальный объект window.event, который хранит в себе информацию о последнем событии. А первого аргумента обработчика просто нет.

То есть, все должно работать так:

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

element.onclick = doSomething;

Обратите внимание, что доступ к event при назначении обработчика в HTML (см. пример выше) по-прежнему будет работать. Такой вот надежный и простой кросс-браузерный доступ к объекту события.

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

Можно кросс-браузерно получить объект события, использовав такой приём:

function doSomething(event) {
    event = event || window.event

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

element.onclick = doSomething

Получение события при inline-записи

Как мы уже говорили раньше, при описании обработчика события в HTML-разметке для получения события можно использовать переменную с названием event.

<input type="button" onclick="alert(event.type)" value="Нажми меня"/>

Этот код в действии:

Это совершенно кросс-браузерный способ, так как по стандарту event - название первого аргумента функции-обработчика, которую автоматом создаст браузер; ну а в IE значение event будет взято из глобального объекта window.

Что дает объект события?

Из объекта события обработчик может узнать, на каком элементе оно произошло, каковы были координаты мыши (для событий, связанных с мышью), какая клавиша была нажата (для событий, связанных с клавиатурой), и извлечь другую полезную информацию.

Например, для события по клику мыши onclick, свойство event.target(в IE event.srcElement) содержит DOM-элемент, на котором этот клик произошел.