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

参考

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