onfocus属性在元素获焦点时执行JS代码，但易因focus()调用与用户操作重复触发；仅原生可聚焦元素（如input、select等）或加tabindex的元素才生效；推荐用addEventListener('focus')替代，配合once或手动移除，并用:focus伪类处理样式。
onfocus 属性的作用是：当用户通过鼠标点击或键盘 Tab 切换使某个可聚焦元素（如 <input>、<select>、<textarea>）获得焦点时，立即执行一段 JavaScript 代码。
为什么直接写 onfocus="..." 容易重复触发？
常见错误是把 onfocus 写在 <input> 上，同时又用 focus() 方法主动调用它 —— 比如在表单校验后自动聚焦到某字段。这时 onfocus 会先被 focus() 触发一次，紧接着用户再点进去又触发一次，导致逻辑跑两遍。
- 典型表现：
alert('focused')弹两次、样式切换错乱、输入框清空两次 - 根本原因：
onfocus是 HTML 属性级绑定，不区分“是谁触发的”，只要焦点落到该元素上就执行 - 更稳妥的做法：改用
addEventListener('focus', handler)，它支持once: true或手动removeEventListener
哪些元素默认支持 onfocus？
不是所有 HTML 元素都能响应 onfocus。只有原生可聚焦元素才有效，比如：
-
<input>（除type="hidden"外） -
<select>、<textarea>、<button> -
<a href>（必须有href属性） -
<iframe>（但注意：它不能直接用onfocus属性，需监听其contentWindow）
<div>、<span> 等默认不可聚焦，硬加 onfocus 属性不会生效 —— 必须先加 tabindex 属性（如 tabindex="0"）才行。
立即学习“前端免费学习笔记（深入）”；
视觉反馈别只靠 onfocus 属性写内联样式
用 onfocus="this.style.borderColor='#007bff'" 这类写法虽然快，但维护性差、无法复用、且和 CSS 动画冲突（比如 transition 不起作用）。
- 推荐做法：用 CSS 的
:focus伪类 + class 控制状态，onfocus只负责逻辑（如清空提示文字） - 例如：
<input type="text" value="搜索..." onfocus="if(this.value==='搜索...')this.value=''">，配合input:focus { outline: 2px solid #007bff; } - 注意：
:focus在 Safari 中对某些contenteditable元素支持不稳定，此时仍需 JS 监听
onfocus 和 onfocusin 的关键区别
onfocus 不冒泡，onfocusin 冒泡 —— 这决定了你能不能在父容器上统一监听子元素聚焦事件。
- 想给整个表单加「任一字段聚焦」的统计埋点？用
form.addEventListener('focusin', handler)，不要用focus -
onfocus属性写法不支持冒泡，所以<form onfocusin="...">才能捕获内部<input>的聚焦 - 兼容性：IE9+ 支持
focusin/focusout，现代浏览器全部支持；onfocus属性则从 IE6 就存在
真正容易被忽略的是：onfocus 绑定后，如果元素被 display: none 或 visibility: hidden 隐藏，它依然可能被脚本 focus() 触发 —— 此时用户看不到效果，但逻辑已执行。上线前务必检查隐藏态下的聚焦行为是否合理。
