元素：focusout 事件

focusout 事件在元素失去焦点后触发，在 blur 事件之后。这两个事件的区别在于 focusout 事件冒泡，而 blur 事件不冒泡。

focusout 的相反事件是 focusin 事件，当元素获得焦点时触发。

focusout 事件不可取消。

语法

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

js
addEventListener("focusout", (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-focusout

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅