Element：focusout 事件

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

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

focusout 事件的对立面是 focusin 事件，该事件在元素获得焦点时触发。

focusout 事件是不可取消的。

语法

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

addEventListener("focusout", (event) => { })

onfocusout = (event) => { }

事件类型

一个 FocusEvent。继承自 UIEvent 和 Event。

事件属性

此接口还继承了其父级 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

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 Events 规范描述了一个与当前浏览器实现不同的焦点事件顺序。

浏览器兼容性

另见

相关事件：blur、focus、focusin
聚焦：focus/blur

帮助改进 MDN

了解如何贡献

此页面最后修改时间为 2025年9月26日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题