Свойства объекта события

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

 

<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

Координаты курсора в момент клика (относительно окна)

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

Объект события доступен и в HTML

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

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

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

Особенности 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

...

};

 

 

Мышь: клики, кнопка, координаты

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

Типы событий мыши

Условно можно разделить события на два типа: «простые» и «комплексные».

Простые события

Mousedown

Кнопка мыши нажата над элементом.

Mouseup

Кнопка мыши отпущена над элементом.

Mouseover

Мышь появилась над элементом.

Mouseout

Мышь ушла с элемента.

Mousemove

Каждое движение мыши над элементом генерирует это событие.

Комплексные события

Click

Вызывается при клике мышью, то есть при mousedown, а затем mouseup на одном элементе

Contextmenu

Вызывается при клике правой кнопкой мыши на элементе.

Dblclick

Вызывается при двойном клике по элементу.

Комплексные можно составить из простых, поэтому в теории можно было бы обойтись вообще без них. Но они есть, и это хорошо, потому что с ними удобнее.