Window: focus event
当元素获得焦点时， focus 事件就会触发。
与 focus 相反的事件是 blur
| Bubbles（支持冒泡） | No |
|---|---|
| Cancelable（可撤销） | No |
| Interface（接口） | FocusEvent |
| Event handler property（事件处理程序属性） | onfocus |
| 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-focus |
| HTML Standard # handler-onfocus |
浏览器兼容性
BCD tables only load in the browser