blur事件监听元素失去焦点瞬间，不冒泡，需单独绑定；适合实时校验、保存草稿等，而focusout会冒泡可用于表单区域监听。
在 JavaScript 中，blur 事件用于监听元素（如输入框）失去焦点的瞬间，也就是用户点击其他地方、按 Tab 键切换、或用代码主动调用 blur() 方法时触发。
基础用法：为 input 添加 blur 监听器
最常用的方式是用 addEventListener 绑定 blur 事件：
- 确保目标元素（如
<input id="username">）已存在 DOM 中 - 监听器函数会在用户离开该输入框时立即执行，不等表单提交
- 适合做实时校验、保存草稿、清理提示等操作
示例代码：
const input = document.getElementById('username');
input.addEventListener('blur', function() {
console.log('输入框已失去焦点');
// 可在这里验证内容、显示错误提示等
});
注意：blur 不会冒泡，不能用事件委托
blur 是一个不冒泡的事件，这意味着你不能像处理 click 那样，在父容器上监听所有子 input 的 blur。必须为每个需要监听的元素单独绑定。
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 如果页面有多个输入框，可以批量获取后循环绑定
- 避免在循环中直接用
for...in或未缓存的this，推荐用forEach或箭头函数保持上下文
批量绑定示例：
document.querySelectorAll('input[data-validate]').forEach(input => {
input.addEventListener('blur', () => {
validateInput(input);
});
});
与 focusout 的区别：什么时候选哪个？
blur 和 focusout 都表示失去焦点，但关键区别在于冒泡行为：
-
blur不冒泡，更轻量，适合精确控制单个元素 -
focusout会冒泡，可用于监听整个表单区域的失焦（比如监听<form>内任意输入框失焦） - 若需兼容旧版 IE（IE8 及以下），只能用
onblur属性写法，但现代项目基本不用考虑
常见配合操作：失焦时做校验或更新
blur 常被用于“用户填完就校验”的场景，比实时 input 事件更友好，减少干扰：
- 检查邮箱格式是否合法，不符合则添加红色边框并显示提示
- 对手机号自动补全区号或格式化（如
138-1234-5678） - 将当前值同步到 localStorage，防止意外关闭页面丢失内容
- 调用 API 检查用户名是否已被注册（注意防抖，避免频繁请求）
小提醒：如果同时监听了 blur 和 submit，记得在提交前手动触发一次 blur，确保校验逻辑不被跳过。
