Window:focus 事件

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

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

语法

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

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

onfocus = (event) => {};

事件类型

事件属性

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

FocusEvent.relatedTarget

EventTarget 代表此次事件的次要目标。在一些案例中(例如切换浏览器 tab 标签时),出于安全的原因,这个属性可能会被设置为 null

示例

实时示例

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

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