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
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-focus |
HTML Standard # handler-onfocus |
浏览器兼容性
BCD tables only load in the browser