input事件在值变化时立即触发，change事件需失焦且值改变才触发；前者适用于实时反馈，后者适合终态校验，二者常需配合使用。

input 事件在用户每次修改 <input> 或 <textarea></textarea> 值时**立即触发**，包括输入、删除、粘贴、拖入文本等所有导致 value 变化的操作；而 change 事件必须等到元素**失去焦点（blur）且值确实发生了变化**才触发——这是两者最核心的差异，也是多数表单校验逻辑出错的根源。

什么时候该用 input 而不是 change

实时响应场景必须选 input：搜索框联想、密码强度提示、字数统计、输入过滤（如只允许数字）。

• change 在用户敲完字就切走（比如 Tab 到下一个字段）时才触发，中间过程完全不可见
• input 能捕获每一次 keystroke 后的值，但要注意：它不触发于 select 的初始选中（仅选项切换时触发），也不触发于 checkbox/radio 的点击（需监听 change 或 click）
• IE 9 及更早版本不支持 input，需降级用 propertychange（已基本可忽略）
• 高频触发下务必手动节流或防抖，否则可能卡顿——尤其在输入中文拼音过程中会连续触发多次

change 的实际适用边界在哪里

change 不是“值变了就触发”，而是“值变了 + 失去焦点”才触发，这个“失焦”条件非常关键。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• <input type="text"> 和 <textarea></textarea>：只有 blur 后值比 focus 时不同，才会触发 change
• <select></select>：选项切换即触发，无需 blur（因为 select 本身不常“失焦”，它的交互就是点选）
• <input type="checkbox"> 或 <input type="radio">：点击即触发 change，与 blur 无关（它们没有文本输入流，状态切换即为终态）
• 如果用户在 input 中输入又删空，最后 blur 时值没变，change 就不会触发——这点常被误认为“事件没绑上”

别踩坑：focus、blur 和表单验证的配合逻辑

单纯靠 blur 做校验容易漏掉“用户没动过字段就直接提交”的情况；而只依赖 input 又可能在用户还没输完时就报错。

• 推荐组合：input 用于实时反馈（如红框/图标），blur 用于“收尾校验”（比如邮箱格式最终确认），submit 时再做一次全量兜底
• focus 适合清空 placeholder 提示、高亮边框；但不要在里面重置校验状态——用户刚点进来就清掉之前的错误提示，体验割裂
• blur 触发时，注意判断是否真的离开了当前字段（比如点击了另一个 input，还是点了按钮？可用 e.relatedTarget 辅助判断）
• 移动端软键盘收起不一定会触发 blur（尤其 iOS Safari），所以不能假设 blur = 用户已完成输入

真正难处理的，是用户一边输入一边切到其他应用、再切回来，或者用语音输入、复制粘贴等非键盘路径改变值——这些都归 input 管，但容易被当成边缘 case 忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！