Element：focusin 事件
当元素获得焦点时，focusin 事件会在 focus 事件之后触发。这两个事件的区别在于 focusin 会冒泡，而 focus 不会。
与 focusin 相反的是 focusout 事件，该事件在元素失去焦点时触发。
focusin 事件不可取消。
语法
在 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。
js
addEventListener("focusin", (event) => { })
onfocusin = (event) => { }
事件类型
FocusEvent。继承自 UIEvent 和 Event。
示例
实时示例
HTML
html
<form id="form">
<label>一些文本：<input type="text" placeholder="文本输入" /></label>
<label>密码：<input type="password" placeholder="密码" /></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 Events # event-type-focusin |
备注：用户界面事件规范描述的焦点事件的触发顺序与当前浏览器的实际实现不同。
浏览器兼容性
参见
- 相关事件：
blur、focus、focusout - 聚焦：focus/blur