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 事件 |