В JavaScript события - это действия, которые происходят в приложении. Они запускаются различными вещами, такими как ввод данных, отправка форм и изменения в элементе, такие как изменение размера, или ошибки, возникающие при запуске приложения и т. Д. Мы можем назначить обработчик событий для обработки этих событий. События, происходящие с элементами DOM, можно обрабатывать путем назначения обработчика событий свойствам объекта DOM для соответствующих событий. Мы рассмотрим обработчики событий ondblclick и ondrag и их использование.

ondblclick

Свойство ondblclick элемента HTML позволяет нам назначить функцию обработчика событий для обработки события dblclick, которое запускается, когда пользователь дважды щелкает элемент. Он срабатывает после завершения обоих щелчков. Например, мы можем использовать его для регистрации позиции, где был сделан двойной щелчок. Сначала мы добавляем HTML-код для отображения позиции, как в следующем коде:

<p id='dblclick-log'>
</p>

Затем мы добавляем код JavaScript с функцией обработчика событий, назначенной свойству document.ondblclick, как в приведенном ниже коде:

const dblclickLog = document.getElementById('dblclick-log');
document.ondblclick = (e) => {
  dblclickLog.textContent = `Double clicked on: (${e.clientX}, ${e.clientY})`;
}

Параметр e выше - это MouseEvent, который имеет следующие свойства:

  • altKey - логическое свойство, доступное только для чтения, которое возвращает true, если клавиша Qlt была нажата при срабатывании события мыши.
  • button - свойство только для чтения, которое указывает номер кнопки, которая была нажата (если применимо), когда было запущено событие мыши.
  • buttons - свойство только для чтения, в котором кнопки нажаты (если есть) при срабатывании события мыши.
  • clientX - свойство только для чтения, имеющее координату X указателя мыши в координатах документа.
  • clientY - свойство только для чтения, имеющее координату Y указателя мыши в координатах локального документа.
  • ctrlKey - логическое значение только для чтения, которое возвращает true, если управляющая клавиша была нажата при срабатывании события мыши.
  • metaKey - логическое значение только для чтения, которое возвращает true, если мета-клавиша была нажата при срабатывании события мыши. Мета-клавиша - это команда или клавиша Apple на клавиатурах Macintosh и клавиша Windows на клавиатурах Windows.
  • movementX - только для чтения, имеющий координату X указателя мыши относительно позиции последнего события mousemove.
  • movementY - свойство только для чтения, имеющее координату Y указателя мыши относительно позиции последнего события mousemove.
  • offsetX - свойство только для чтения, которое имеет координату X указателя мыши относительно положения края заполнения целевого узла
  • offsetY - свойство только для чтения, имеющее координату Y указателя мыши относительно положения края заполнения целевого узла.
  • pageX - свойство только для чтения, имеющее координату X указателя мыши относительно всего документа.
  • pageY - свойство только для чтения, координата Y указателя мыши относительно всего документа.
  • region - свойство только для чтения, которое возвращает идентификатор области попадания, затронутой событием. Если ни одна область попадания не затронута, возвращается null.
  • relatedTarget - свойство только для чтения, имеющее вторичную цель для события, если таковая имеется.
  • screenX - свойство только для чтения, имеющее координату X указателя мыши в глобальных (экранных) координатах.
  • screenY - свойство только для чтения, имеющее координату Y указателя мыши в глобальных (экранных) координатах.
  • shiftKey - логическое свойство, доступное только для чтения, которое возвращает true, если при срабатывании события мыши была нажата клавиша Shift.
  • which - только для чтения, когда кнопка была нажата при срабатывании события мыши.
  • mozPressure - доступный только для чтения, в котором при создании события к сенсорному устройству или планшету применяется давление. Это значение находится в диапазоне от 0.0 (минимальное давление) до 1.0 (максимальное давление). Это устаревшее (и нестандартное) свойство. Вместо этого мы должны использовать свойство pressure объекта PointerEvent.
  • mozInputSource - свойство только для чтения, которое имеет тип устройства, сгенерировавшего событие (одна из констант MOZ_SOURCE_*, перечисленных ниже). Мы можем определить, было ли событие мыши сгенерировано реальной мышью или событием касания, или обнаружить другие источники ввода, с которыми пользователь взаимодействует с этим свойством.
  • webkitForce - свойство только для чтения, в котором указывается сила давления при нажатии
  • x - свойство только для чтения, являющееся псевдонимом для clientX.
  • y - свойство только для чтения, являющееся псевдонимом для clientY.

Зная, что мы также можем отслеживать такие вещи, как двойной щелчок с нажатой клавишей Alt или двойной щелчок с нажатой клавишей Windows. Сначала мы добавляем следующий HTML-код для отображения результатов:

<p id='dblclick-log'>
</p>
<p id='alt-pressed'>
</p>
<p id='meta-pressed'>
</p>

Затем в код JavaScript мы добавляем:

const dblclickLog = document.getElementById('dblclick-log');
const altPressed = document.getElementById('alt-pressed');
const metaPressed = document.getElementById('meta-pressed');
document.ondblclick = (e) => {
  dblclickLog.textContent = `Double clicked on: (${e.clientX}, ${e.clientY})`;
  altPressed.textContent = e.altKey ? 'Alt key pressed' : '';
  metaPressed.textContent = e.metaKey ? 'Windows key pressed' : '';
}

Затем мы сможем отследить, была ли нажата клавиша Alt или Windows при двойном щелчке.

ондраг

Свойство ondrag позволяет нам назначить функцию обработчика событий, которую мы определяем для обработки события drag, которое запускается, когда элемент, для которого установлено значение атрибута draggable, равное true, перетаскивается на экран браузера. Например, мы пишем следующий HTML-код для создания HTML-блока:

<div id='drag-box' draggable="true">
</div>

Затем мы стилизуем его с помощью CSS, делая 100 пикселей в ширину и 100 пикселей в высоту и заполняем его красным фоном:

#drag-box {
  width: 100px;
  height: 100px;
  background-color: red;
}

Наконец, мы можем добавить код JavaScript для отслеживания действия перетаскивания блока, назначив функцию обработчика событий свойству ondrag элемента DOM нашего блока, который мы создали в HTML-коде:

const dragBox = document.getElementById('drag-box');
dragBox.ondrag = (e) => {
  console.log(e);
}

Затем, когда мы начнем перетаскивать, мы должны получить следующий результат от console.log при перетаскивании блока:

altKey: false
bubbles: true
button: 0
buttons: 1
cancelBubble: false
cancelable: true
clientX: 90
clientY: 68
composed: true
ctrlKey: false
currentTarget: null
dataTransfer: DataTransfer {dropEffect: "none", effectAllowed: "uninitialized", items: DataTransferItemList, types: Array(0), files: FileList}
defaultPrevented: false
detail: 0
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 90
layerY: 68
metaKey: false
movementX: 0
movementY: 0
offsetX: 82
offsetY: 60
pageX: 90
pageY: 68
path: (5) [div#drag-box, body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 2250
screenY: 520
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: div#drag-box
target: div#drag-box
timeStamp: 5233.220000285655
toElement: div#drag-box
type: "drag"
view: Window {parent: global, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
which: 1
x: 90
y: 68

Свойства те же, что и у объектов MouseEvent и Event, поскольку объект DragEvent, который мы получаем из параметра функции обработчика событий, наследуется от обоих. Мы можем получить координату перетаскивания с помощью свойств x и y, зарегистрированных выше.

Свойство ondblclick элемента HTML позволяет нам назначить функцию обработчика событий для обработки события dblclick, которое запускается, когда пользователь дважды щелкает элемент. Мы получаем MouseEvent в параметре функции обработчика событий, чтобы мы могли использовать его свойства по своему усмотрению. Свойство ondrag позволяет нам назначить функцию обработчика событий, которую мы определяем для обработки события drag, которое запускается, когда элемент, для которого установлено значение атрибута draggable, равное true, перетаскивается на экран браузера. Мы можем получить координату перетаскивания с помощью свойств x и y из объекта DragEvent.