JavaScript中监听焦点用focus/blur事件，适用于表单控件及带tabindex元素；focusin/focusout支持事件委托；需注意tabindex设置、移动端限制及动态元素绑定时机。
JavaScript 中监听元素的焦点获得与失去，主要用 focus 和 blur 事件。它们是原生、轻量、无需额外库的方案，适用于表单控件（如 input、textarea、select）以及设置了 tabindex 的任意元素。
监听焦点获得（focus）
当元素获得焦点时触发，比如用户点击输入框、按 Tab 键切换到它，或通过 .focus() 方法主动聚焦。
- 使用
addEventListener('focus', handler)是推荐方式，支持多次绑定且更灵活 -
onfocus属性也可用，但一个元素只能绑定一个，不推荐在复杂逻辑中使用 - 注意：
focus事件不冒泡，所以不能在父元素上靠事件委托监听子元素的 focus
监听焦点失去（blur）
当元素失去焦点时触发，比如用户点击别处、按 Tab 离开、或调用 .blur() 方法。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 同样推荐用
addEventListener('blur', handler) -
blur事件也不冒泡，无法委托监听 - 若需在焦点离开整个表单时执行操作，可监听表单内所有可聚焦元素的
blur，或结合focusout（它会冒泡）
想支持事件委托？用 focusin 和 focusout
如果希望在父容器统一处理子元素的焦点变化（例如监听整个 form 内所有输入框），可用冒泡版本：
立即学习“Java免费学习笔记（深入）”；
-
focusin：相当于可冒泡的focus -
focusout：相当于可冒泡的blur - 它们在 Chrome、Firefox、Safari 和 Edge 中均支持良好
- 示例：
form.addEventListener('focusin', e => { if (e.target.matches('input')) console.log('输入框获得了焦点'); });
注意事项和常见坑
实际开发中容易忽略的细节：
- 普通
div默认不可聚焦，需添加tabindex="0"（可被 Tab 访问）或tabindex="-1"（仅可通过 JS 聚焦） - 移动端 Safari 对
focus触发较保守，有时需要用户真实交互（如点击）后才允许聚焦输入框 - 动态插入的元素，要确保事件监听器在元素存在后再绑定，或用事件委托（
focusin/focusout）解决 - 避免在
focus中立即调用.blur()，可能引发意外行为或循环
