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

<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 – на который переместилась мышь.

Задачи

1. Скрытие элемента при клике на него

2. Перемещать блок с помощью клавиш «WASD»

3. Одновременное нажатие кнопок

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