UI-события

API UI-событий определяет систему для обработки пользовательского взаимодействия, такого как ввод с помощью мыши и клавиатуры. Это включает:

• события, которые срабатывают при определённых действиях пользователя, таких как нажатия клавиш или щелчки мышью. Большинство из этих событий срабатывают на интерфейсе Element, но события, связанные с загрузкой и выгрузкой ресурсов, срабатывают на интерфейсе Window.
• интерфейсы событий, которые передаются обработчикам этих событий. Эти интерфейсы наследуются от Event и предоставляют дополнительную информацию, специфичную для типа пользовательского взаимодействия: например, KeyboardEvent передаётся обработчику события keydown и предоставляет информацию о нажатой клавише.

CompositionEvent

Передаётся обработчикам событий композиции. События композиции позволяют пользователю вводить символы, которые могут отсутствовать на физической клавиатуре.

FocusEvent

Передаётся обработчикам событий фокуса, которые связаны с элементами, получающими или теряющими фокус.

InputEvent

Передаётся обработчикам событий ввода, которые связаны с вводом пользователем данных; например, с использованием элемента <input>.

KeyboardEvent

Передаётся обработчикам событий нажатия/отпускания клавиш.

MouseEvent

Передаётся обработчикам событий мыши, включая перемещение мыши, наведение мыши на область и выход из неё, а также нажатие и отпускание кнопок мыши. Обратите внимание, что события auxclick, click и dblclick передают объекты PointerEvent.

MouseScrollEvent Устаревший

Устаревший, только для Firefox, нестандартный интерфейс для событий прокрутки. Используйте WheelEvent вместо него.

MutationEvent Устаревший

Передаётся обработчикам событий мутаций, которые были разработаны для оповещения о изменениях в DOM. Теперь устаревший: используйте MutationObserver вместо него.

UIEvent

Базовый интерфейс для других событий UI, а также интерфейс события, передаваемый некоторым событиям, таким как load и unload.

WheelEvent

Передаётся обработчику события wheel, которое срабатывает, когда пользователь вращает колесо мыши или подобный элемент управления интерфейсом, например, тачпад.

abort

Срабатывает, когда загрузка ресурса была прервана (например, потому что пользователь отменил её).

auxclick

Срабатывает, когда пользователь щелкает не основной кнопкой указателя.

beforeinput

Срабатывает незадолго до того, как DOM будет обновлён с пользовательским вводом.

blur

Срабатывает, когда элемент потерял фокус.

click

Срабатывает, когда пользователь щелкает основной кнопкой указателя.

compositionend

Срабатывает, когда система композиции текста (например, система преобразования речи в текст) завершила свою сессию; например, потому что пользователь её закрыл.

compositionstart

Срабатывает, когда пользователь начал новую сессию с системой композиции текста.

compositionupdate

Срабатывает, когда система композиции текста обновляет свой текст новым символом, что отражается в обновлении свойства data объекта CompositionEvent.

contextmenu

Срабатывает незадолго до вызова контекстного меню.

dblclick

Срабатывает, когда пользователь дважды щелкает основной кнопкой указателя.

error

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

focus

Срабатывает, когда элемент получил фокус.

focusin

Срабатывает, когда элемент вот-вот получит фокус.

focusout

Срабатывает, когда элемент вот-вот потеряет фокус.

input

Срабатывает сразу после обновления DOM с пользовательским вводом (например, вводом текста).

keydown

Срабатывает, когда пользователь нажал клавишу.

keypress Устаревший

Срабатывает, когда пользователь нажал клавишу, только если клавиша создаёт символьное значение. Используйте keydown вместо этого.

keyup

Срабатывает, когда пользователь отпустил клавишу.

load

Срабатывает, когда вся страница загрузилась, включая все зависимые ресурсы, такие как стили и изображения.

mousedown

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

mouseenter

Срабатывает, когда курсор мыши или другое указательное устройство перемещаются внутрь границ элемента или одного из его потомков.

mouseleave

Срабатывает, когда курсор мыши или другое указательное устройство перемещается за пределы границ элемента и всех его потомков.

mousemove

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

mouseout

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

mouseover

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

mouseup

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

unload

Срабатывает при выгрузке документа или дочернего ресурса.

wheel

Срабатывает, когда пользователь вращает колесо мыши или аналогичный компонент пользовательского интерфейса, например, тачпад.

В этом примере регистрируются события мыши вместе с координатами X и Y, в которых было сгенерировано событие. Попробуйте переместить курсор мыши в жёлтый и красный квадраты, и щелкните или дважды щелкните.

HTML

<div id="outer">
  <div id="inner"></div>
</div>

<div id="log">
  <pre id="contents"></pre>
  <button id="clear">Clear log</button>
</div>

CSS

body {
  display: flex;
  gap: 1rem;
}

#outer {
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: yellow;
}

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

#contents {
  height: 150px;
  width: 250px;
  border: 1px solid black;
  padding: 0.5rem;
  overflow: scroll;
}

JavaScript

const outer = document.querySelector("#outer");
const inner = document.querySelector("#inner");
const contents = document.querySelector("#contents");
const clear = document.querySelector("#clear");
let lines = 0;

outer.addEventListener("click", (event) => {
  log(event);
});

outer.addEventListener("dblclick", (event) => {
  log(event);
});

outer.addEventListener("mouseover", (event) => {
  log(event);
});

outer.addEventListener("mouseout", (event) => {
  log(event);
});

outer.addEventListener("mouseenter", (event) => {
  log(event);
});

outer.addEventListener("mouseleave", (event) => {
  log(event);
});

function log(event) {
  const prefix = `${String(lines++).padStart(3, "0")}: `;
  const line = `${event.type}(${event.clientX}, ${event.clientY})`;
  contents.textContent = `${contents.textContent}${prefix}${line}\n`;
  contents.scrollTop = contents.scrollHeight;
}

clear.addEventListener("click", () => {
  contents.textContent = "";
  lines = 0;
});

Результат

В этом примере регистрируются события keydown, beforeinput и input. Попробуйте ввести текст в текстовую область. Обратите внимание, что клавиши, такие как Shift, генерируют события keydown, но не input события.

HTML

<textarea id="story" rows="5" cols="33"></textarea>

<div id="log">
  <pre id="contents"></pre>
  <button id="clear">Clear log</button>
</div>

CSS

body {
  display: flex;
  gap: 1rem;
}

#story {
  padding: 0.5rem;
}

#contents {
  height: 150px;
  width: 250px;
  border: 1px solid black;
  padding: 0.5rem;
  overflow: scroll;
}

JavaScript

const story = document.querySelector("#story");
const contents = document.querySelector("#contents");
const clear = document.querySelector("#clear");
let lines = 0;

story.addEventListener("keydown", (event) => {
  log(`${event.type}(${event.key})`);
});

story.addEventListener("beforeinput", (event) => {
  log(`${event.type}(${event.data})`);
});

story.addEventListener("input", (event) => {
  log(`${event.type}(${event.data})`);
});

function log(line) {
  const prefix = `${String(lines++).padStart(3, "0")}: `;
  contents.textContent = `${contents.textContent}${prefix}${line}\n`;
  contents.scrollTop = contents.scrollHeight;
}

clear.addEventListener("click", () => {
  contents.textContent = "";
  lines = 0;
});

Результат

• API событий указателя
• События касания