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

158
посл. ред. 16.09.2016

Любое событие создаёт объект, в котором содержится полезная информация о данном событии. Он базируется на общем объекте Event, но, также, содержит дополнительную информацию о том, что случилось. Дополнительная информация зависит от типа произошедшего события (события мыши, клавиатуры и т.д.) и содержится в свойствах, которые наследуются от соответствующего класса (MouseEvent, KeyboardEvent и т.д.).

Ниже представлены свойства, которые доступны в объекте event в зависимости от типа события.

Свойства событий клавиатуры

Очень часто при использовании событий клавиатуры, чтобы произвести нужное действие, требуется получить информацию о том, какая клавиша была нажата. Эта информация содержится в свойствах объекта события.

Устаревшие свойства keyCode, charCode и which удалены из спецификации. Их использование нежелательно, так как может вызвать проблемы при работе программы.

key

Чтобы узнать, какой символ введён пользователем, используется свойство event.key.

Свойство key возвращает строку, содержащую одно из следующих значений:

  • Если клавиша имеет печатное представление (буквы, цифры, спецсимволы), то возвращается строка из одного символа, который был бы напечатан при нажатии данной клавиши.
  • Если нажата функциональная клавиша (F1 - F12, табуляция, стрелки и т.д.), то возвращается предопределённое значение, соответствующее данной клавише.
  • Если нажата комбинация клавиш, которая используется браузером для внутренних действий (сочетание Ctrl + A выделяет текст), то возвращается символ, соответствующий печатной клавише.

Событие keypress срабатывает не всегда. При нажатии на клавиши-модификаторы (Ctrl, Shift и т.п.) событие keypress не срабатывает.

<html>
<head>
  <title>События</title>
</head>
<body>
  <p>Значение клавиши: <input type="text" placeholder="Нажмите клавишу" onkeydown="event.preventDefault(); this.value = event.key;"></p>
</body>
</html>

Значение клавиши:

При нажатии на клавиши внутри текстового поля можно посмотреть, какие значения возвращает свойство key.

Свойство key поддерживается не всеми браузерами, поэтому данный пример можно использовать для проверки работоспособности свойства.

code

Чтобы узнать физическое расположение нажатой клавиши на клавиатуре, используется свойство event.code.

Свойство code представляет значение, которое не зависит ни от раскладки клавиатуры, ни от нажатия клавиш-модификаторов. Нажатию одной клавиши может соответствовать несколько различных символов, поэтому полученное значение не получится использовать для представления в виде текста.

<html>
<head>
  <title>События</title>
</head>
<body>
  <p>Код клавиши: <input type="text" placeholder="Нажмите клавишу" onkeydown="event.preventDefault(); this.value = event.code;"></p>
</body>
</html>

Код клавиши:

При нажатии на клавиши внутри текстового поля можно посмотреть, какие значения возвращает свойство code.

Свойство code поддерживается не всеми браузерами, поэтому данный пример можно использовать для проверки работоспособности свойства.

Клавиши-модификаторы

Чтобы проверить, была ли зажата клавиша-модификатор в момент вызова события, можно воспользоваться следующими свойствами (имеют булевые значения):

  • event.altKey - клавиша Alt.
  • event.ctrlKey - клавиша Ctrl.
  • event.metaKey - клавиша Command или Windows.
  • event.shiftKey - клавиша Shift.

Данные свойства доступны и для событий мыши.

<html>
<head>
  <title>События</title>
</head>
<body>
  <p id="paragraph"></p>
  <input type="text" placeholder="Сочетание клавиш" onkeypress="isPressed(event); return false;">
</body>
</html>
 
<script>
  function isPressed(event) {
    var par = document.getElementById('paragraph');
    par.innerHTML = 'Alt: ' + event.altKey + '<br>Ctrl: ' + event.ctrlKey + '<br>Meta: ' + event.metaKey + '<br>Shift: ' + event.shiftKey;
  }
</script>

При нажатии сочетаний клавиш внутри текстового поля скрипт покажет, какие клавиши были зажаты.

Свойства событий мыши

Мышь - это основной манипулятор, которым пользуется посетитель сайта. События мыши имеют несколько очень полезных свойств.

button

С помощью свойства event.button можно узнать, какая кнопка мыши была нажата в момент вызова события.

Свойство button может иметь одно из значений:

  • -1 - никакая кнопка не нажата.
  • 0 - нажата основная кнопка (обычно это левая кнопка).
  • 1 - нажата средняя кнопка (обычно это колёсико).
  • 2 - нажата вторая кнопка (обычно это правая кнопка).
  • 3 - нажата четвёртая кнопка (обычно это кнопка Назад).
  • 4 - нажата пятая кнопка (обычно это кнопка Вперёд).
<html>
<head>
  <title>События</title>
</head>
<body>
  <input type="button" value="Нажмите кнопку" onmouseup="whichButton(event);">
</body>
</html>
 
<script>
  function whichButton(event) {
    switch (event.button) {
        case 0: {
          alert('Основная кнопка');
          break;
        }
        case 1: {
          alert('Средняя кнопка');
          break;
        }
        case 2: {
          alert('Вторая кнопка');
          break;
        }
    }
  }
</script>

clientX, clientY

Свойства event.clientX и event.clientY содержат координаты указателя мыши на момент возникновения события. Данные координаты отсчитываются относительно окна документа (относительно видимой области окна), то есть эти координаты могут меняться в зависимости от прокрутки страницы. Начало координат берётся в верхнем левом углу видимой области окна.

В качестве единиц измерения координат используются пиксели.

<html>
<head>
  <title>События</title>
</head>
<body>
  <div style="width:100px; height:100px; background:coral; cursor: default" onmousemove="showXY(event);"></div>
</body>
</html>

<script>
  function showXY(event){
    event.currentTarget.textContent = 'X: ' + event.clientX + ' Y: ' + event.clientY;
  }
</script>

pageX, pageY

Свойства event.pageX и event.pageY содержат координаты указателя мыши на момент возникновения события. Данные координаты отсчитываются относительно всего документа, то есть эти координаты не меняются при прокрутке страницы. Начало координат берётся в верхнем левом углу документа.

В качестве единиц измерения координат используются пиксели.

<html>
<head>
  <title>События</title>
</head>
<body>
  <div style="width:100px; height:100px; background:coral; cursor: default" onmousemove="showXY(event);"></div>
</body>
</html>

<script>
  function showXY(event){
    event.currentTarget.textContent = 'X: ' + event.pageX + ' Y: ' + event.pageY;
  }
</script>

screenX, screenY

Свойства event.screenX и event.screenY содержат координаты указателя мыши на момент возникновения события. Данные координаты отсчитываются относительно экрана монитора. Начало координат берётся в верхнем левом углу экрана.

В качестве единиц измерения координат используются пиксели.

<html>
<head>
  <title>События</title>
</head>
<body>
  <div style="width:100px; height:100px; background:coral; cursor: default" onmousemove="showXY(event);"></div>
</body>
</html>

<script>
  function showXY(event){
    event.currentTarget.textContent = 'X: ' + event.screenX + ' Y: ' + event.screenY;
  }
</script>