推荐用 addeventlistener 替代 onfocus/onblur 内联属性，因其支持状态管理、条件逻辑、多输入框维护及框架集成；内联写法仅适用于无状态单输入框场景。
onfocus 和 onblur 属性可以配对使用，但直接写在 HTML 里容易失控——尤其是需要响应式状态、条件逻辑或多个输入框时，推荐用 addEventListener 替代。
onfocus/onblur 属性只适合最简场景
比如单个输入框、无状态依赖、不涉及校验或样式联动时，可快速写成：
<input type="text" value="请输入邮箱" onfocus="this.value=''" onblur="if(!this.value) this.value='请输入邮箱'">
但这种写法很快会暴露问题：
- 无法区分“用户清空后失焦”和“从未输入就离开”，导致提示文案误恢复
- 不能监听
Enter提交或Tab切换时的焦点流转细节 - 多个输入框共用同一段内联脚本，维护成本高、易出错
- 无法与 React/Vue 等框架的状态同步，
this.value可能被框架劫持失效
用 addEventListener 实现可维护的焦点状态切换
真正可控的做法是绑定事件监听器，并配合一个明确的状态变量（如 isFocused）或 class 控制行为：
- 用
input.addEventListener('focus', ...)捕获聚焦，更新状态或样式 - 用
input.addEventListener('blur', ...)捕获失焦，触发校验或还原默认值 - 注意：如果要监听子元素失焦委托（比如表单容器统一处理），必须用
focusout，因为blur不冒泡 - 禁用状态（
disabled）下不会触发任何焦点事件，无需额外判断
示例中清空提示文本并避免重复恢复：
const input = document.querySelector('input');<br>let hasUserInput = false;<br><br>input.addEventListener('focus', () => {<br> if (input.value === '请输入邮箱') {<br> input.value = '';<br> input.classList.add('active');<br> }<br>});<br><br>input.addEventListener('blur', () => {<br> if (!input.value && !hasUserInput) {<br> input.value = '请输入邮箱';<br> input.classList.remove('active');<br> }<br>});<br><br>input.addEventListener('input', () => {<br> hasUserInput = true;<br>});
blur 时机比你想的更微妙
失焦不是“鼠标点开别处”才发生，它可能在以下情况触发：
- 按
Tab移出当前输入框（包括循环到第一个元素） - 点击页面其他可聚焦元素（
button、a[href]、其他input） - 调用
element.blur()或切换浏览器标签页（部分浏览器） - 但不会在
document.body点击触发——因为body默认不可聚焦，除非加了tabindex
所以别假设 blur 一定代表“用户完成填写”，它只是“离开当前控件”。真正判断是否提交，应以 submit 或显式按钮点击为准。
autofocus 不等于 JS focus()，别混用
页面加载时想默认聚焦，优先用 HTML 的 autofocus 属性：
<input type="text" autofocus>
而不是在 DOMContentLoaded 里调用 input.focus()，原因有三：
-
autofocus由浏览器统一管控，兼容屏幕阅读器，且不会打断用户正在做的操作 -
input.focus()在某些移动端或 iframe 场景下会被静默拒绝，无报错也无效果 - 若用了
autofocus，JS 中的初始isFocused状态也得设为true，否则状态与 DOM 不一致
复杂交互里，焦点状态容易和表单校验、无障碍属性（aria-invalid）、CSS 伪类（:focus-within）产生耦合，动一个得核对一整条链。先理清“谁该决定焦点何时生效”，再写代码。
