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
# handler-onfocus

浏览器兼容性

参见