4.7 KiB
Объект события
Чтобы хорошо обработать событие, недостаточно знать о том, что это -- "клик" или "нажатие клавиши". Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.
Детали произошедшего браузер записывает в "объект события", который передаётся первым аргументом в обработчик. [cut]
Получение объекта события
Пример ниже демонстрирует использования объекта события:
<!--+ run -->
<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`
- Координаты курсора в момент клика (относительно окна)
Есть также и ряд других свойств, в зависимости от событий, которые мы разберём в дальнейших главах, когда будем подробно знакомиться с событиями мыши, клавиатуры и так далее.
[smart header="Объект события доступен и в HTML"]
При назначении обработчика в HTML, тоже можно использовать переменную event, это будет работать кросс-браузерно:
<!--+ autorun height=auto -->
<input type="button" onclick="*!*alert(event.type)*/!*" value="Тип события">
Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) { alert(event.type) }. То есть, её первый аргумент называется "event".
[/smart]
Особенности 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
...
};