语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
jsaddEventListener("focus", (event) => { })
onfocus = (event) => { }
事件类型
一个 FocusEvent。继承自 UIEvent 和 Event。
事件属性
此接口还继承了其父级 UIEvent 的属性，以及间接继承自 Event 的属性。
FocusEvent.relatedTarget
失去焦点的元素（如果有）。
示例
简单示例
HTML
html
JavaScript
jsconst 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
JavaScript
jsconst 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
浏览器兼容性
加载中…
另见
HTMLElement.focus() 方法
相关事件：blur、focusin、focusout
此事件在 Window 上的目标：focus 事件
聚焦：focus/blur
帮助改进 MDN
此页面对您有帮助吗？
是
否
了解如何贡献 此页面最后由 MDN 贡献者于 2025年9月25日 修改。
在 GitHub 上查看此页面 • 报告此内容的问题