JavaScript中监听焦点用focus/blur事件，适用于表单控件和tabindex元素；focusin/focusout可冒泡，支持事件委托；需注意autofocus时机及Tab方向判断需结合keydown与activeElement追踪。
JavaScript 中监听元素获得与失去焦点，主要靠 focus 和 blur 事件。这两个事件是原生、轻量、无需额外库的方案，适用于表单控件（如 input、textarea、select）以及设置了 tabindex 的任意元素。
用 addEventListener 监听 focus 和 blur
推荐使用标准事件监听方式，避免内联写法，便于维护和解耦：
-
focus：元素获得焦点时触发（例如用户点击输入框或按 Tab 进入） -
blur：元素失去焦点时触发（例如点击别处、按 Tab 离开） - 注意：
focus和blur不会冒泡，但有对应的可冒泡版本focusin和focusout（兼容性好，现代浏览器均支持）
示例：
const input = document.querySelector('input');
input.addEventListener('focus', () => {
console.log('输入框获得了焦点');
});
input.addEventListener('blur', () => {
console.log('输入框失去了焦点');
});
focusin 和 focusout 支持事件委托
当需要统一管理多个表单元素，或动态添加的元素需自动绑定焦点逻辑时，用 focusin/focusout 更合适——它们会冒泡，可在父容器上监听：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
const form = document.querySelector('form');
form.addEventListener('focusin', (e) => {
if (e.target.matches('input, textarea, select')) {
e.target.classList.add('focused');
}
});
form.addEventListener('focusout', (e) => {
if (e.target.matches('input, textarea, select')) {
e.target.classList.remove('focused');
}
});
注意 autofocus 和初始焦点行为
页面加载后若元素带 autofocus 属性，focus 事件会在 DOM 加载完成、渲染后触发，但可能早于 DOMContentLoaded。稳妥做法是：
- 在
DOMContentLoaded后再绑定事件，避免监听器未就绪 - 不依赖
autofocus触发首次focus的业务逻辑，因为部分浏览器或辅助技术可能忽略它 - 如需程序化聚焦，调用
element.focus()后，focus事件会同步触发（除非被preventDefault阻止）
区分 focus/blur 与键盘操作（如 Tab 切换）
单纯监听 focus/blur 无法得知焦点移动方向（向前还是向后 Tab）。如需判断，可结合 keydown 监听 Tab 键，并记录上一个活跃元素：
- 按住 Shift + Tab 是反向切换，
event.shiftKey === true - 保存上一个
document.activeElement的引用，对比变化可推断流向 - 更健壮的做法是使用
focusin+ 自定义状态追踪，而非仅靠事件类型
