UI 事件
概念与用法
UI 事件 API 定义了一个用于处理用户交互（如鼠标和键盘输入）的系统。这包括
- 在特定用户操作（如按键或鼠标单击）时触发的事件。这些事件大多在
Element接口上触发，但与加载和卸载资源相关的事件在Window接口上触发。 - 事件接口，它们被传递给这些事件的处理程序。这些接口继承自
Event，并提供特定于用户交互类型的额外信息：例如，KeyboardEvent被传递给keydown事件处理程序，并提供有关按下的键的信息。
接口
CompositionEvent-
传递给组合事件处理程序的事件。组合事件使用户能够输入可能不在物理键盘上提供的字符。
FocusEvent-
传递给焦点事件处理程序的事件，这些事件与元素获得或失去焦点相关。
InputEvent-
传递给输入事件处理程序的事件，这些事件与用户进行某些输入相关；例如，使用
<input>元素。 KeyboardEvent-
传递给键盘抬起/按下事件处理程序的事件。
MouseEvent-
传递给鼠标事件处理程序的事件，包括鼠标移动、鼠标移入和移出、以及鼠标按钮抬起或按下。请注意，
auxclick、click和dblclick事件传递的是PointerEvent对象。 MouseScrollEvent已弃用-
已弃用、仅限 Firefox、非标准的滚动事件接口。请改用
WheelEvent。 MutationEvent已弃用-
传递给可变事件处理程序的事件，这些事件旨在允许通知 DOM 的更改。现在已弃用：请改用
MutationObserver。 UIEventWheelEvent-
传递给
wheel事件处理程序的事件，当用户旋转鼠标滚轮或类似的 UI 组件（如触摸板）时触发。
事件
abort-
当资源加载被中止时触发（例如，因为用户取消了它）。
auxclick-
当用户单击非主指针按钮时触发。
beforeinput-
在 DOM 即将根据用户输入进行更新之前触发。
blur-
当一个元素失去焦点时触发。
click-
当用户单击主指针按钮时触发。
compositionend-
当文本组合系统（如语音转文本处理器）结束其会话时触发；例如，因为用户已将其关闭。
compositionstart-
当用户启动与文本组合系统的新会话时触发。
compositionupdate-
当文本组合系统使用新字符更新其文本时触发，这在
CompositionEvent的data属性中反映。 -
在调用上下文菜单之前触发。
dblclick-
当用户双击主指针按钮时触发。
error-
当资源加载失败或无法处理时触发（例如，如果图像无效或脚本有错误）。
focus-
当元素获得焦点时触发。
focusin-
当元素即将获得焦点时触发。
focusout-
当元素即将失去焦点时触发。
input-
在 DOM 根据用户输入（例如，某些文本输入）更新之后立即触发。
keydown-
当用户按下按键时触发。
keypress已弃用-
当用户按下按键时触发，仅当按键产生字符值时。请改用
keydown。 keyup-
当用户释放按键时触发。
load-
当整个页面加载完毕时触发，包括所有依赖资源，如样式表和图像。
mousedown-
当用户在元素或其子元素上按下鼠标或其它指针设备按钮时触发。
mouseenter-
当鼠标或其它指针设备在元素或其子元素边界内移动时触发。
mouseleave-
当鼠标或其它指针设备移出元素及其所有子元素的边界时触发。
mousemove-
当鼠标或其它指针设备在元素上方移动时触发。
mouseout-
当鼠标或其它指针设备移出元素边界时触发。
mouseover-
当鼠标或其它指针设备移到元素上方时触发。
mouseup-
当用户在元素上释放鼠标或其它指针设备按钮时触发。
unload-
当文档或子资源正在卸载时触发。
wheel-
当用户旋转鼠标滚轮或类似的 UI 组件（如触摸板）时触发。
示例
鼠标事件
此示例记录鼠标事件以及生成事件的 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;
});
结果
规范
| 规范 |
|---|
| UI 事件 |