Window:focus 事件
当元素获得焦点时,focus
事件就会触发。
与 focus
相反的事件是 blur
,此事件不可取消,也不会冒泡。
语法
在如 addEventListener()
等方法中使用事件名称,或设置事件处理器属性。
js
addEventListener("focus", (event) => {});
onfocus = (event) => {};
事件类型
一个 FocusEvent
。继承自 UIEvent
和 Event
。
事件属性
此接口从它的父类 UIEvent
继承了属性,间接继承于 Event
。
-
EventTarget
代表此次事件的次要目标。在一些案例中(例如切换浏览器 tab 标签时),出于安全的原因,这个属性可能会被设置为null
。
示例
实时示例
本示例在失去焦点时更改文档的外观。它使用 addEventListener()
监听 focus
和 blur
事件。
HTML
html
<p id="log">单击文档使其获得焦点。</p>
CSS
css
.paused {
background: #ddd;
color: #555;
}
JavaScript
js
function pause() {
document.body.classList.add("paused");
log.textContent = "失去焦点!";
}
function play() {
document.body.classList.remove("paused");
log.textContent = "文档有焦点,点击文档外部可失去焦点。";
}
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