元素：focus 事件

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

参见