元素：focus 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

focus 事件在元素获取焦点时触发。这个事件和 focusin 最大的区别仅仅在于后者会事件冒泡。

focus 与 blur 正好相反。

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

语法

在象 addEventListener() 这样的方法中使用事件名称或设置事件处理器属性。

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

onfocus = (event) => {};

事件属性

该接口还从其父级 UIEvent 和 Event 继承属性。

FocusEvent.relatedTarget

一个 EventTarget，表示此事件的次要目标。在某些情况下（例如切换到当前标签页或离开当前标签页），处于安全原因，该属性可能会被设置为 null。

示例

简单示例

HTML

html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>

结果

事件委托

此事件有两个可以实现事件委托的方法：通过在支持的浏览器上使用 focusin 事件，或者通过设置 addEventListener() 的参数useCapture 值为 true。

HTML

html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>

JavaScript

js
const form = document.getElementById("form");

form.addEventListener(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

form.addEventListener(
  "blur",
  (event) => {
    event.target.style.background = "";
  },
  true,
);

结果

规范

Specification
UI Events
# event-type-focus
HTML Standard
# handler-onfocus

浏览器兼容性

BCD tables only load in the browser

参见