EventTarget事件：focus
EventTarget事件 - focus
当元素获得焦点时，focus事件将触发。这个事件和focusin之间的主要区别在于只有后者冒泡。
注意：与focus相反的是blur。
基本信息
| 接口 | FocusEvent |
|---|---|
| 同步/异步 | 同步 |
| 是否冒泡 | 没有 |
| 是否可取消 | 没有 |
| 目标 | Window， Element |
| 是否组合 | 是 |
| 默认操作 | 没有 |
属性
| 属性 | 类型 | 描述 |
|---|---|---|
target（只读） | EventTarget | 事件目标（DOM元素） |
type（只读） | DOMString | 事件的类型。 |
bubbles（只读） | Boolean | 事件是否正常冒泡。 |
cancelable（只读） | Boolean | 事件是否可以取消。 |
relatedTarget（只读） | EventTarget （DOM元素） | null |
示例
事件授权
有两种方法可以为此事件实现事件授权：通过使用focusin事件或将addEventListener()的useCapture参数设置为true。
请参阅blur参考页面上此示例的代码。
Window focus
此示例在失去焦点时更改文档的外观。它使用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.';
}
const log = document.getElementById('log');
window.addEventListener('blur', pause);
window.addEventListener('focus', play);规范
| 规范 | 状态 | 注释 |
|---|---|---|
| UI事件 | Working Draft | 添加了此事件的组成信息 |
| 文档对象模型（DOM）3级事件规范 | Obsolete | 初步定义 |
浏览器兼容性Section
我们将兼容性数据转换为机器可读的JSON格式。
- 电脑端
| Chrome | Edge | Firefox（Gecko） | Internet Explorer | Opera | Safari | |
|---|---|---|---|---|---|---|
| 基本支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
- 移动端
| 特征 | Android | 适用于Android的Chrome | Edge | Firefox Mobile（Gecko） | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| 基本支持 | ？ | ？支持 | ？ | ？ | ？ | ？ |
在Firefox 24之前该接口是Event。