109 lines
4.7 KiB
Markdown
109 lines
4.7 KiB
Markdown
# Объект события
|
||
|
||
Чтобы хорошо обработать событие, недостаточно знать о том, что это -- "клик" или "нажатие клавиши". Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.
|
||
|
||
**Детали произошедшего браузер записывает в "объект события", который передаётся первым аргументом в обработчик.**
|
||
[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
|
||
...
|
||
};
|
||
```
|
||
|