Window：focus 事件

当元素获得焦点时，focus 事件就会触发。

与 focus 相反的事件是 blur，此事件不可取消，也不会冒泡。

语法

在如 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。

js
addEventListener("focus", (event) => {});

onfocus = (event) => {};

事件类型

一个 FocusEvent。继承自 UIEvent 和 Event。

Event UIEvent FocusEvent

事件属性

此接口从它的父类 UIEvent 继承了属性，间接继承于 Event。

FocusEvent.relatedTarget

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

参见

  • 相关联事件：blur
  • Element 目标上的这个事件：focus 事件