В 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
.