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

В этой статье рассмотрим: как получить информацию о событии, свойства и методы объекта события, свойства MouseEvent
и KeyboardEvent
, отличие target
от currentTarget
, пример с relatedTarget
.
Как получить информацию о событии?
Получить детальную информацию о событии в обработчике можно посредством объекта события (Event
). Данный объект создаёт браузер, когда это событие происходит. В него он помещает много различной информации. Например, для события click
: какая клавиша нажата, координаты курсора и др.
Объект события в соответствии со стандартом всегда передаётся обработчику посредством первого аргумента:
document.addEventListener('click', function(e) { // e – объект события, который создал браузер; он содержит детальную информацию о событии });
Например, выведем детальную информацию в консоль при клике на элемент:
<div id="center">CENTER</div> <script> const center = document.querySelector('#center'); center.addEventListener('click', function (e) { console.log(`Кнопка: ${e.which}`); console.log(`Координаты: (${e.x};${e.y})`); console.log(`Тип события: ${e.type}`); console.log(`Тег элемента: ${e.currentTarget.tagName}`); }); </script>

Свойства и методы объекта события
Свойства объекта 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
– координаты клика относительно левого верхнего угла отображаемой страницы.
Например, получим координаты курсора при перемещении по документу (событие mousemove
):

document.addEventListener('mousemove', function (e) { console.log(`Координаты: (${e.x};${e.y})`); });
Так как в разметке элементы вложены друг в друга, то курсор в большинстве случаев всегда находится одновременно над несколькими элементами. Но взаимодействие всегда осуществляется с тем, кто расположен глубже других (т.е. ближе к нам по оси Z). Если элементы находятся не в основном потоке, то в этом случае с тем, у кого больше значение свойства z-index. Но если элементы имеют одинаковое значение z-index, то тогда ближе к нам будет уже тот, кто из них глубже расположен.
Например, при движении мыши будем выводить информацию о элементе (его значение id
), который в данный момент создаёт событие mousemove
:
document.addEventListener('mousemove', function (e) { console.log(`id: ${e.target.id}`); });

Свойства объекта события 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}`); });

Отличие 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
Свойство relatedTarget
предназначено для определения дополнительной цели, связанной с событием.
Например:
- для события
mouseover
свойствоtarget
указывает элемент, на который курсор был перемещён, аrelatedTarget
– с какого; - для
mouseout
свойствоtarget
указывает элемент, с которого вышел курсор, аrelatedTarget
– на который он вошёл.
Пример:

document.addEventListener('mouseover', function (e) { console.log(`type: ${e.type}`); console.log(`target: ${e.target.tagName.toLowerCase()}.${e.target.className}`); console.log(`relatedTarget: ${e.relatedTarget.tagName.toLowerCase()}.${e.relatedTarget.className}`); }); document.addEventListener('mouseout', function (e) { console.log(`type: ${e.type}`); console.log(`target: ${e.target.tagName.toLowerCase()}.${e.target.className}`); console.log(`relatedTarget: ${e.relatedTarget.tagName.toLowerCase()}.${e.relatedTarget.className}`); });
Задачи
1. Удаление элемента при клике на нем
На странице имеется 9 элементов li
, расположенные в .items
.

<ul class="items"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>
Необходимо написать JavaScript сценарий, который будет при клике на элементе удалять его из DOM.
Решение2. Перемещение блока с помощью клавиш «WASD»
Имеется элемент:

<style> #box { position: fixed; width: 100px; height: 100px; } </style> <div id="box"></div>
Нужно создать код, который будет при нажатии клавиш «WASD» перемещать элемент #box
по странице.
3. Одновременное нажатие кнопок
Напишете код, который будет при одновременном нажатии клавиш Z и X показывать в верхней части экрана сообщение.

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