UI 事件

概念和用法

UI 事件 API 定义了一个用于处理用户交互（例如鼠标和键盘输入）的系统。这包括

  • 在特定用户操作（例如按键或鼠标点击）时触发的事件。大多数这些事件在 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

当文本组合系统使用新字符更新其文本时触发，反映在 CompositionEvent 的 data 属性的更新中。

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

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

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

CSS

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

js
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

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

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

CSS

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

js
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;
});

结果

规范

规范
UI 事件

另请参阅