onblur事件在元素失去焦点时立即触发，不依赖值是否变化；支持内联属性、onblur赋值和addEventListener三种绑定方式，推荐后者以防覆盖；其触发时机包括点击别处、Tab切换、调用blur()或软键盘收起等。
onblur 事件绑定方式与执行时机
onblur 是原生 DOM 事件，只要元素失去焦点就触发，不依赖值是否变化。它在用户点击别处、按 Tab 切换、或调用 input.blur() 时同步发生。
常见错误是直接在 HTML 中写 onblur="handleBlur()" 却没定义全局函数，或在 JS 中用 input.onblur = handler 但未等 DOM 加载完成——此时 input 可能为 null。
- 动态绑定推荐用
addEventListener("blur", handler)，避免被覆盖 - 若用内联属性（
onblur），确保函数在全局作用域可访问，且脚本在 DOM 后执行或包裹在window.onload中 - React/Vue 等框架中不要直接操作 DOM 绑定，应使用对应生命周期或 ref 回调
blur 和 onchange 触发条件的实质区别
onblur 和 onchange 常被混用，但行为完全不同：onblur 是「只要失焦就触发」，onchange 是「失焦且值比上一次 onchange 后有变化才触发」。
例如用户输入 "abc" 后点别处，onblur 立刻执行；如果此前已触发过一次 onchange，且这次值仍是 "abc"，则 onchange 不会再触发。
立即学习“前端免费学习笔记（深入）”；
- 做实时校验（如邮箱格式提示）用
onblur，因为它稳定可靠 - 做终态提交或保存（如编辑后自动同步）用
onchange，它天然防抖 -
type="checkbox"或type="radio"的onchange在勾选瞬间就触发，不等失焦——这是特例，别套用到文本框逻辑上
移动端软键盘弹出后 blur 被意外触发的原因
iOS Safari 和部分 Android WebView 中，blur 可能在键盘收起瞬间自动触发，哪怕用户没点其他地方。这不是 bug，而是浏览器对焦点管理的保守策略。
典型表现：输入框刚获得焦点，键盘还没完全展开，就立刻又触发了 blur；或者用户输完按回车，键盘收起的同时 input 失去焦点，导致你写的校验逻辑提前跑。
- 别在
blur里直接提交表单或跳转，优先检查document.activeElement是否仍是当前 input - 需要确认“真正离开”时，可加简单防抖：
setTimeout(() => { if (document.activeElement !== input) handleRealBlur(); }, 100) - 避免在
blur中调用input.focus()强行抢回焦点——iOS 下大概率失败，且会干扰屏幕阅读器
动态插入 input 后 onblur 不生效的排查点
模态框、Tab 切换页、或 React/Vue 动态渲染的 input，常出现绑定后 blur 完全不触发。根本原因不是事件没绑，而是绑到了一个已被移除的旧节点上。
比如用 innerHTML = "...<input>..." 替换内容，旧 input 节点被销毁，其上所有事件监听器一并消失。
- 改用
appendChild()或insertAdjacentHTML()并在插入后立即绑定事件 - 使用事件委托：给父容器监听
blur，再用event.target.matches("input[data-validate]")过滤 - 框架场景下，确保绑定发生在组件挂载后（React 的
useEffect，Vue 的mounted钩子）
