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

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

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

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

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

```html
<!--+ run -->
<input type="button" value="Нажми меня" id="elem">

<script>
  elem.onclick = function(*!*event*/!*) {
    alert(event.type + " на " + event.currentTarget); 
    alert(event.clientX + ":" + event.clientY); 
  }
</script>
```

Свойства объекта `event`:
<dl>
<dt>`event.type`</dt>
<dd>Тип события, в данном случае `click`</dd>
<dt>`event.currentTarget`</dt>
<dd>Элемент, на котором сработал обработчик -- то же, что и `this`, но бывают ситуации, когда обработчик является методом объекта и его `this` при помощи `bind` привязан к объекту, тогда `event.currentTarget` полезен.</dd>
<dt>`event.clientX / event.clientY`</dt>
<dd>Координаты курсора в момент клика (относительно окна)</dd>
</dl>

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

[smart header="Объект события доступен и в HTML"]
При назначении обработчика в HTML, тоже можно использовать переменную `event`, это будет работать кросс-браузерно:

```html
<!--+ autorun height=auto -->
<input type="button" onclick="*!*alert(event.type)*/!*" value="Тип события">
```

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

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

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

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

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

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

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

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

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

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

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

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

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

## Итого

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

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

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

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

Еще вариант:

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