元素：focus 事件Baseline Widely availableThis feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Learn moreSee full compatibilityReport feedbackfocus 事件在元素获取焦点时触发。这个事件和 focusin 最大的区别仅仅在于后者会事件冒泡。
focus 与 blur 正好相反。
该事件不可取消，也不会冒泡。
语法在象 addEventListener() 这样的方法中使用事件名称或设置事件处理器属性。
jsaddEventListener("focus", (event) => {});
onfocus = (event) => {};
事件属性该接口还从其父级 UIEvent 和 Event 继承属性。
FocusEvent.relatedTarget
一个 EventTarget，表示此事件的次要目标。在某些情况下（例如切换到当前标签页或离开当前标签页），处于安全原因，该属性可能会被设置为 null。
示例简单示例HTML
html
结果
事件委托此事件有两个可以实现事件委托的方法：通过在支持的浏览器上使用 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,
);
结果
规范SpecificationUI Events # event-type-focusHTML # handler-onfocus浏览器兼容性参见
相关的事件：blur、focusin、focusout
在 Window 目标上的该事件：focus 事件
Focusing: focus/blur