onblur属性与addeventlistener('blur', ...)均可监听失焦，但前者仅支持单函数绑定且难维护，后者可多次注册、逻辑集中、推荐用于复杂场景；blur仅在真失去焦点时触发，disabled或焦点未真正获得时不生效。
直接用 onblur 或 addEventListener('blur', ...) 就行，但要注意它只在「真失去焦点」时触发，不是所有“离开输入框”的操作都算。
onblur 属性写法 vs addEventListener('blur', ...) 的区别
两者都能监听失去焦点，但行为和维护性差异明显：
-
onblur是 HTML 属性，只能绑定一个函数，重复赋值会覆盖前一个 -
addEventListener('blur', ...)可多次调用，不冲突，推荐用于复杂逻辑或多人协作项目 - 原生
onblur属性写在标签里（如<input onblur="validate()>），调试时不易追踪来源；addEventListener把逻辑集中到 JS 文件，更可控
blur 事件不触发的常见原因
你以为用户点开了别的地方，但 blur 没执行？很可能是以下情况：
- 目标元素没真正获得过焦点——比如
tabindex="> 或 <code>disabled状态下无法触发blur - 点击的是另一个
input，但新 input 的focus被 JS 阻止（如event.preventDefault()）或异步延迟，导致旧 input 的blur被吞掉 - 在移动端，软键盘收起不一定会触发
blur，尤其当页面被缩放、inputmode设置不当或存在transform样式干扰时 - 使用
document.activeElement检查发现焦点还在body或iframe内，说明焦点没落到预期元素上
blur 和 change、input 事件的关键分界
别把它们混着用，触发时机和用途完全不同：
-
blur：只关心「是否离开」，不管值有没有变。适合做最终校验、提交前清理、隐藏关联浮层 -
change：必须「值变了 + 失去焦点」才触发。适合表单控件（如select、checkbox）的状态确认，不适合实时输入反馈 -
input：值一变就触发（包括粘贴、剪切、自动填充），但不保证焦点状态。适合字符计数、搜索建议、OTP 自动跳转
例如验证邮箱格式，blur 比 input 更合适——避免用户每敲一个字母就报错。
需要兼容 IE9 以下？别用 onblur 做兜底
onblur 本身在所有浏览器都支持，但如果你同时依赖 focus/blur 配合做「焦点进出区域」判断（比如弹出菜单后点击外部关闭），IE8 及更早版本对 document.activeElement 支持极差，且 blur 在某些嵌套 iframe 场景下不冒泡。这时候硬加兼容意义不大——2026 年还要求支持 IE8 的项目，通常已有整套降级方案，不应把焦点逻辑当作突破口。真要保老浏览器，优先检查是否必须用原生 blur，还是能用 jQuery 的 .blur()（内部做了事件模拟）或改用 mousedown + activeElement 组合判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
