元素：focus 事件

当元素获得焦点时，会触发focus事件。该事件不会冒泡，但随后触发的相关focusin事件会冒泡。

focus的反面是blur事件，当元素失去焦点时会触发该事件。

focus事件不可取消。

语法

在诸如addEventListener()之类的函数中使用事件名称，或设置事件处理程序属性。

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

onfocus = (event) => {};

事件类型

一个FocusEvent。继承自UIEvent和Event。

Event UIEvent FocusEvent

事件属性

此接口还继承了其父级UIEvent的属性，并间接继承了Event的属性。

FocusEvent.relatedTarget

如果存在，则为失去焦点的元素。

示例

简单示例

HTML

html
<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

js
const password = document.querySelector('input[type="password"]');

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

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

结果

事件委托

有两种方法可以为该事件实现事件委托：使用focusin事件，或将addEventListener()的useCapture参数设置为true。

HTML

html
<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</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,
);

结果

规范

规范
UI 事件
# event-type-focus
HTML 标准
# handler-onfocus

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅