語法
在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。
js
addEventListener("focus", (event) => { })
onfocus = (event) => { }
事件型別
一個 FocusEvent。繼承自 UIEvent 和 Event。
事件屬性
此介面還繼承了其父級 UIEvent 的屬性,以及間接繼承自 Event 的屬性。
-
一個
EventTarget,代表此事件的次要目標。在某些情況下(例如,在頁面中或頁面外進行選項卡切換時),出於安全原因,此屬性可能設定為null。
示例
即時示例
此示例在文件失去焦點時更改其外觀。它使用 addEventListener() 來監控 focus 和 blur 事件。
HTML
html
<p id="log">Click on this document to give it focus.</p>
CSS
css
.paused {
background: #dddddd;
color: #555555;
}
JavaScript
js
const log = document.getElementById("log");
function pause() {
document.body.classList.add("paused");
log.textContent = "FOCUS LOST!";
}
function play() {
document.body.classList.remove("paused");
log.textContent =
"This document has focus. Click outside the document to lose focus.";
}
window.addEventListener("blur", pause);
window.addEventListener("focus", play);
結果
規範
| 規範 |
|---|
| UI 事件 # event-type-focus |
| HTML # handler-onfocus |
瀏覽器相容性
載入中…