Свойства и методы объекта события в JavaScript
На этом уроке мы рассмотрим для чего предназначен объект event
и как его получить. А также познакомимся со свойствами и методами этого объекта.
Как получить информацию о событии?
Получить детальную информацию о событии в обработчике события можно посредством объекта события (Event
). Данный объект создаёт браузер, когда это событие происходит. В него он помещает много различной информации, например, для события click
: какая клавиша нажата, координаты курсора и др.
Объект события в соответствии со стандартом всегда обработчику передаётся через первый аргумент.
Пример:
document.addEventListener('click', function(e) { // e – объект события, который создаёт браузер и доступный нам через первый аргумент });

Свойства и методы объекта события
Свойства объекта Event
:
bubbles
– логическое значение, указывающее на то является ли данное событие всплывающим;cancelable
– определяет можно ли событие отменить;cancelBubble
– при установкеtrue
предотвращает всплытие события, т.е. оно всплывать не будет (является псевдонимом методаstopPropagation
);composed
– указывает может ли событие всплывать через из теневого DOM (внутреннего DOM конкретного элемента) в обычный DOM документа;currentTarget
– элемент, привязанный к обработчику события;defaultPrevented
– показывает был ли для события вызван методpreventDefault
;eventPhase
– число, указывающее фазу процесса распространения события (0 – не обрабатывается, 1 – погружение, 2 – целевой элемент, 3 – всплытие);isTrusted
– указывает вызвано ли событие действием пользователя или программно (посредством использования методаdispatchEvent
);returnValue
– альтернатива дляpreventDefault
;target
– элемент, на которой создал событие;timestamp
– время, когда произошло событие;type
– тип (имя) события.
Методы объекта Event
:
preventDefault
– отменяет событие, если его конечно можно отменить;stopPropagation
– предотвращает всплытие события.
Свойства объекта события MouseEvent
Свойства объекта события при click
, dblclick
, mousedown
иmouseup
:
altKey
,ctrlKey
,metaKey
иshiftKey
– позволяют узнать была ли нажата соответствующая клавиша (т.е., alt, ctrl, meta и shift) при возникновении событии;which
– число, сообщающее о том, какая кнопка мыши была нажата (1 - левая кнопка, 2 - средняя кнопка, 3 - правая кнопка);button
– также как иwhich
указывает какая кнопка мыши была нажата, чтобы вызвать данное событие (0 – основная кнопка, обычно левая кнопка мыши, 1 – кнопка колёсика или средняя кнопка, 2 – правая кнопка);clientX
иclientY
– координаты курсора относительно левого верхнего угла viewport;screenX
иscreenY
– координаты клика относительно верхнего левого угла физического экрана или окна браузера;screenX
иscreenY
– координаты клика относительно верхнего левого угла физического экрана или окна браузера;pageX
иpageY
– координаты клика относительно левого верхнего угла отображаемой страницы.
Свойства объекта события KeyboardEvent
Объект KeyboardEvent позволяет обрабатывать взаимодействия пользователя с клавиатурой:
altKey
,ctrlKey
,metaKey
иshiftKey
– аналогично MouseEvent;keyCode
иwhich
– код символа;code
– физической код клавиши на клавиатуре;key
– значение символа нажатой клавиши;location
– возвращает число, сообщающее о расположении клавиши на клавиатуре;repeat
– возвращает true, когда нажата клавиши, ввод которой автоматически повторяется.
В большинстве случаев при работе с клавиатурными событиями пользуются свойствами code
и key
.
document.addEventListener('keyup', function (e) { console.log(`type: ${e.type}`); console.log(`altKey: ${e.altKey}`); console.log(`code: ${e.code}`); console.log(`ctrlKey: ${e.ctrlKey}`); console.log(`key: ${e.key}`); console.log(`keyCode: ${e.keyCode}`); console.log(`metaKey: ${e.metaKey}`); console.log(`repeat: ${e.repeat}`); console.log(`shiftKey: ${e.shiftKey}`); console.log(`which: ${e.which}`); });

Например, при перемещении мыши (событие mousemove
) по веб-странице, вывести координаты курсора в элемент, имеющий id="myP"
.
<p id="myP"></p> <script> document.addEventListener("DOMContentLoaded",function() { document.addEventListener("mousemove", function(event) { var myP = document.getElementById("myP"); var X = event.clientX; var Y = event.clientY; myP.textContent = "X = " + X + "; Y = "+ Y; }, false); },false); </script>
Если курсор находится над несколькими элементами одновременно, то его получает элемент, который расположен в DOM наиболее глубоко. Курсор может быть только над одним элементов - самым глубоким в DOM (и верхним по z-index).
Отличие target от currentTarget
События в браузере по умолчанию всплывают. Из-за этого:
target
– элемент, который вызвал событие;currentTarget
– элемент, к которому прикреплен обработчик события.
Например, рассмотрим этот код:
<body> <div class="outer"> <div class="inner">...</div> </div> </body>
При клике на div.inner
будет создано событие click
, которое будет подниматься от узла div.inner
до window
(проходя через div.outer
, body
, html
и document
соответственно - при условии, что мы не отключили всплытие события с помощью нашего js-кода).
При этом обработчик события мы можем прикрепить к любому из этих узлов (div.inner
, div.outer
, body
, html
, document
, window
). Разница между currentTarget
и target
в том, что target
всегда будет указывать на источник события (.inner
), а currentTarget
на элемент к которому мы прикрепили обработчик.
Например, прикрепим обработчик к элементу .outer
:
const outer = document.querySelector('.outer'); outer.addEventListener('click', function (e) { const $target = e.target; const $currentTarget = e.currentTarget; // выведем значения в консоль console.log($target); console.log($currentTarget); });
При клике на элемент .inner
событие click
будет всплывать. В обработчике, который мы назначили элементу .outer
, свойство target
будет указывать на элемент, который вызвал событие, а currentTarget
- на элемент, к которому этот обработчик добавлен, т.е. на .outer
.

Использование target и relatedTarget
Для типа события mouseover
свойство target
указывает на элемент, на который курсор был перемещён, а relatedTarget
– с какого.
Для mouseout
свойство target
указывает на элемент, из которого вышел курсор, а relatedTarget
– на который переместилась мышь.
Например, свойство
relatedTarget
(для мыши) может быть использовано для получения дополнительной информации о событиях mouseover
или mouseout
.Для события
mouseover
: свойство target
- указывает на элемент, который сейчас находится под курсором; а свойство relatedTarget
- на элемент с которого курсор пришёл.Для события
mouseout
: свойство target
- указывает на элемент с которого курсор пришёл; а relatedTarget
(для мыши) - на элемент, который сейчас находится под курсором.Задачи
1. Скрытие элемента при клике на него
2. Перемещать блок с помощью клавиш «WASD»

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

Определить поддерживает ли устройство touch можно так:
Но ориентироваться на это не очень хорошая идея. Т.к. сейчас имеется достаточного много устройств с сенсорным экраном и мышью (например, ноутбуки).
В этом случае typeEvent будет равен 'touchend' и пользователь на ноутбуке с сенсорным экраном сможет работать с сайтом только посредством касаний, а посредством мыши нет.
Наверно, лучше решение — это будет использовать сразу 2 события. Но, чтобы функция 2 раза не выполнилась использовать preventDefault:
Если используете jQuery, то так:
Имеется несколько кнопок с одним классом (несколько копий одной кнопки), запускающих, например, форму в окне.
Как «цивилизованно» (на jQuery) отслеживать кнопу по которой кликнули, чтобы «сделать что-то разное», в зависимости от того, по какой кнопке кликнули? Прописывать if? Или можно реализовать через event?
Спасибо.
Через объект event Вы можете только узнать больше информации о произошедшем событии. Полученная информация не даст Вам сделать «что-то разное». Т.е. чтобы сделать что-то разное нужно эту информацию с чем-то сравнивать, а для этого необходимо использовать конструкцию if.
Ситуации, когда конструкцию if можно не использовать, если Вы хотите что-то сделать с самим элементом, или с его родителем или ребенком. Для этого с помощью объекта event Вы получаете элемент, который сгенерировал событие (event.target). Получив этот объект, вы можете изменить значение его атрибутов, изменить текст его ребёнка и т.п. Но если Вы хотите что-то сделать не связанное с этим объектом (или с его предками и потомками), то выполнить это можно только через условия.
Например, если Вы хотите посмотреть всю информацию объекта event о произошедшем событии, то можно написать следующий код: