focus和blur事件用于监听表单元素获得或失去焦点，是非冒泡事件，常用于即时校验、样式切换等；需注意异步操作防抖、focusin/focusout的冒泡优势及程序聚焦的兼容性问题。
JavaScript 中的 focus 和 blur 事件用于监听表单元素（如 input、textarea、select）获得或失去焦点的状态，是实现即时校验、样式切换、辅助提示等交互功能的基础。
focus 与 blur 的基本用法
这两个事件属于非冒泡事件（但可通过 focusin / focusout 实现冒泡），通常直接绑定在目标元素上：
-
focus：元素被用户点击、Tab 键切换或通过.focus()方法主动聚焦时触发； -
blur：元素失去焦点（比如点击别处、按 Tab 离开、调用.blur()）时触发。
示例：
const input = document.querySelector('input');
input.addEventListener('focus', () => {
input.classList.add('focused');
});
input.addEventListener('blur', () => {
input.classList.remove('focused');
});
处理 focus/blur 时的常见注意事项
实际开发中容易忽略几个关键点：
立即学习“Java免费学习笔记（深入）”；
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
-
异步操作需谨慎：例如在
blur中发起 AJAX 校验，若用户快速切换输入框，可能造成响应错乱，建议加防抖或取消前序请求； -
focus 不会冒泡，但 focusin 会：如果要在父容器统一监听子元素聚焦，用
focusin更方便（它冒泡，且兼容性良好）； -
程序触发不总触发事件：调用
element.focus()默认会触发focus事件，但在某些情况（如页面未激活、元素不可见、tabindex="-1"且未显式设置可聚焦）下可能失败，建议配合document.hasFocus()或检查document.activeElement做确认。
结合表单验证的实用模式
多数场景下，focus/blur 不单独使用，而是配合其他逻辑提升体验：
- 首次 focus 显示提示：用户第一次点入输入框时展示格式说明，避免干扰初次浏览；可用闭包或 data 属性标记“已触发过”；
- blur 时校验 + 动态反馈：失焦即检查必填、邮箱格式等，立即显示错误图标或文字，比提交时才报错更友好；
- focus 时清除错误状态：用户重新编辑时，自动隐藏上一次的错误提示，避免误以为仍无效。
例如：
let isFirstFocus = true;
input.addEventListener('focus', () => {
if (isFirstFocus) {
showHint();
isFirstFocus = false;
}
clearError();
});
input.addEventListener('blur', () => {
validateInput();
});
替代方案与增强建议
现代开发中可考虑更健壮的组合方式：
- 用
focusin/focusout替代focus/blur，便于委托监听整个表单； - 配合
input事件做实时校验（如长度、字符限制），blur 仅做最终确认； - 使用
ElementInternals.setValidity()（实验性）或自定义 validity 状态，让原生约束 API 与手动校验协同工作。
不复杂但容易忽略。
