元素：focusin 事件

**focusin** 事件在元素获得焦点后触发，在 focus 事件之后。这两个事件的区别在于 focusin 会冒泡，而 focus 不会。

focusin 的反面是 focusout 事件，它在元素失去焦点时触发。

focusin 事件不可取消。

语法

在诸如 addEventListener() 之类的方法中使用事件名称。

js
addEventListener("focusin", (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 form = document.getElementById("form");

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

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

结果

规范

规范
UI 事件
# event-type-focusin

注意：UI 事件规范描述了 焦点事件的顺序，这与当前浏览器实现的顺序不同。

浏览器兼容性

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

另请参阅