Window: focus event

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

focus 相反的事件是 blur

Bubbles(支持冒泡) No
Cancelable(可撤销) No
Interface(接口) FocusEvent
Event handler property(事件处理程序属性) onfocus
Sync / Async(同步/异步) Sync
Composed(可组成) Yes

示例

在线示例

本示例在失去焦点时更改文档的外观。它使用 addEventListener() 监听 focusblur 事件。

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 事件