语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("blur", (event) => { })
onblur = (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-blur |
| HTML # handler-onblur |
浏览器兼容性
加载中…
在处理此事件时，Document.activeElement 的值在不同浏览器中有所不同（Firefox bug 452307）：IE10 会将其设置为焦点将移动到的元素，而 Firefox 和 Chrome 通常会将其设置为文档的 body。