focus事件不冒泡，需直接绑定；多个元素可用querySelectorAll遍历绑定；需冒泡时用focusin；注意移动端自动聚焦限制及DOM加载时机。
在 JavaScript 中，focus 事件用于监听元素（如输入框）获得焦点的时刻，但它不冒泡，所以不能用事件委托的方式监听父容器里的动态输入框。常用方式是直接为 input、textarea 或 select 元素绑定 focus 事件。
直接绑定 focus 事件
最简单可靠的方式：获取元素后调用 addEventListener 监听 focus。
- 确保 DOM 已加载完成（放在
DOMContentLoaded里或脚本放</body>前） - 推荐使用
addEventListener，而非onfocus属性，便于解绑和复用
示例：
const input = document.getElementById('myInput');
input.addEventListener('focus', function() {
console.log('输入框已获得焦点');
// 可在此清空提示文字、添加高亮边框等
});
监听多个输入框（循环绑定）
如果有多个输入框，可用 querySelectorAll 批量获取并遍历绑定。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 注意不要在循环中直接用
var声明函数内变量，避免闭包问题（推荐用let或箭头函数） - 也可给所有输入框加统一 class（如
js-focus-track），再按类名选取
示例：
document.querySelectorAll('input, textarea').forEach(el => {
el.addEventListener('focus', () => {
el.classList.add('focused');
});
});
focus vs focusin：需要冒泡时用 focusin
如果希望监听某个容器内任意子输入框聚焦（比如表单区域），且支持事件冒泡，应使用 focusin 而非 focus。
-
focusin是冒泡版的focus，兼容性良好（IE8+ 支持） -
focusout对应blur的冒泡版本
示例：
const form = document.querySelector('#myForm');
form.addEventListener('focusin', (e) => {
if (e.target.matches('input, textarea, select')) {
console.log('表单内某控件获得了焦点：', e.target.name);
}
});
常见注意事项
- 移动端 Safari 等浏览器中，
focus()方法可能被阻止（如未由用户手势触发），但focus事件本身仍可监听用户点击/触摸输入框的行为 - 自动聚焦（
input.focus()）建议配合setTimeout或放在focus事件回调中，避免被浏览器拦截 - 若需同时监听失去焦点，搭配
blur或focusout使用更稳妥
