Window: blur event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
当元素失去焦点时，**blur**事件将触发。
与 blur 相反的是focus。
| Bubbles（是否支持冒泡） | No |
|---|---|
| Cancelable（可撤销） | No |
| Interface（接口） | FocusEvent |
| Event handler property（事件处理程序属性） |
onblur
|
| Sync / Async（同步/异步） | Sync |
| Composed | Yes |
示例
在线示例
此示例当文档失去焦点时，更改其外观。它使用addEventListener() 去监听focus和 blur 事件。
HTML
html
<p id="log">Click on this document to give it focus.</p>
CSS
css
.paused {
background: #ddd;
color: #555;
}
JavaScript
js
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.";
}
const log = document.getElementById("log");
window.addEventListener("blur", pause);
window.addEventListener("focus", play);
结果
规范
| Specification |
|---|
| UI Events # event-type-blur |
| HTML # handler-onblur |
浏览器兼容性
BCD tables only load in the browser
document. activeelement 的值在处理时因浏览器而异（Firefox bug 452307）：IE10 将其设置为焦点将移动到的元素，而 Firefox 和 Chrome 通常将其设置为文档的 body。