Window: blur event
当元素失去焦点时,**blur
**事件将触发。
与 blur
相反的是focus
。
Bubbles(是否支持冒泡) | No |
---|---|
Cancelable(可撤销) | No |
Interface(接口) | FocusEvent |
Event handler property(事件处理程序属性) | onblur |
Sync / Async(同步/异步) | Sync |
Composed | Yes |
示例
在线示例
此示例当文档失去焦点时,更改其外观。它使用addEventListener()
去监听focus
和 blur
事件。
HTML
<p id="log">Click on this document to give it focus.</p>
CSS
.paused {
background: #ddd;
color: #555;
}
JavaScript
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 Standard # handler-onblur |
浏览器兼容性
BCD tables only load in the browser
document. activeelement
的值在处理时因浏览器而异(Firefox bug 452307):IE10 将其设置为焦点将移动到的元素,而 Firefox 和 Chrome 通常将其设置为文档的 body。