Window: focus 事件

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

focus 的反义词是 blur。

此事件不可取消，也不会冒泡。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

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

onfocus = (event) => {};

事件类型

一个 FocusEvent。继承自 UIEvent 和 Event。

Event UIEvent FocusEvent

事件属性

此接口还继承其父级 UIEvent 的属性，并间接继承自 Event。

FocusEvent.relatedTarget

一个表示此事件的辅助目标的 EventTarget。在某些情况下（例如，在页面中进行标签切换时），出于安全原因，此属性可能设置为 null。

示例

实时示例

此示例在文档失去焦点时更改文档的外观。它使用 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);

结果

规范

规范
UI 事件
# event-type-focus
HTML 标准
# handler-onfocus

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

  • 相关事件：blur
  • 此事件在 Element 上的目标：focus 事件