onblur在元素失去焦点时立即触发，无论值是否改变；onchange则需值发生改变且失去焦点才触发。二者触发条件不同：onblur仅关注焦点离开，onchange强调值变与失焦双重条件。
onblur 什么时候触发？和 onchange 有什么区别？
onblur 在元素失去焦点时立刻触发，不管用户有没有改过值。比如用户点进 <input>、什么都没输就直接点到别处，onblur 也会执行。而 onchange 必须满足“值被修改 + 失去焦点”两个条件才触发。
常见误判场景：
- 用户快速 tab 切换输入框，
onblur会触发，但onchange不一定 - 用 JS 脚本修改
value（比如自动补全），不会触发onchange，但手动失焦仍会触发onblur - 表单提交前如果没失焦，
onblur就根本不会运行 —— 它不参与 submit 生命周期
怎么绑定 onblur？内联写法 vs addEventListener 的关键差异
内联写法如 <input onblur="validateName()"> 看似简单，但实际开发中更推荐用 addEventListener("blur", handler)，原因很实在：
- 一个元素只能有一个
onblur属性值，重复赋值会覆盖；addEventListener可多次添加不同处理函数 -
blur事件默认不冒泡，但用addEventListener("blur", handler, true)开启捕获阶段，能监听子元素失焦（比如 input 里的 icon 按钮） - 便于统一销毁：比如在组件卸载时调用
removeEventListener，避免内存泄漏
注意：onblur 是属性名，blur 才是事件类型名 —— 写 addEventListener 时必须用后者。
表单校验用 onblur 合适吗？三个现实约束
onblur 常被用于“离开即校验”，但它不是万能的，得看场景：
- 移动端软键盘收起不等于失焦：iOS Safari 中点击 Done 键可能不触发
blur，得配合input或change补漏 - 无障碍访问（如屏幕阅读器）下，焦点切换逻辑更复杂，
blur触发时机可能延迟或跳过 - 连续快速填写时，用户还没输完就失焦（比如输到一半切走），校验结果容易造成干扰 —— 建议加防抖（debounce），比如延迟 300ms 再执行验证逻辑
典型组合策略：oninput 做实时长度提示 + onblur 做最终格式校验（如邮箱正则、密码强度）。
为什么 onBlur 校验有时不生效？检查这三点
常见失效不是代码写错，而是被忽略的基础细节：
-
disabled或readonly的<input>不会触发blur—— 它们本身就不能获得焦点 - 用
focus()主动聚焦后立即blur()，在部分浏览器（尤其是旧版 Safari）中会被忽略，需加setTimeout微任务延后 - 父容器设置了
pointer-events: none，子元素无法响应任何焦点事件，包括blur
真正麻烦的是跨 iframe 场景：主页面绑了 blur，但输入框在 iframe 里，事件根本传不出来 —— 这时候得在 iframe 内部单独监听并 postMessage 通知主站。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
