input事件实时触发，适用于即时反馈；change事件在失焦且值改变后触发，适用于最终确认；二者可共存配合使用，需注意初始值处理与重复提交问题。

监听文本框的 input 和 change 事件，关键在于理解它们的触发时机不同：input 在值**实时变化时立即触发**（比如打字、粘贴、删除），而 change 只在元素**失去焦点且值发生过改变时才触发**（比如输入后点别处或按 Tab）。

监听 input 事件：适合实时校验与响应

用 addEventListener('input', handler) 即可捕获每一次输入变动。它兼容所有现代浏览器，包括中文输入法在“组词完成并上屏”后才触发（避免拼音过程中的误判）。

• 适用于：实时搜索建议、字数统计、表单即时验证、防抖搜索
• 注意：不要在 input 里直接修改 value（如格式化手机号），否则可能干扰用户输入光标位置；如需格式化，应谨慎同步光标
• 示例：// 获取当前最新值
  inputEl.addEventListener('input', () => { console.log(inputEl.value); });

监听 change 事件：适合提交前最终确认

change 更适合用于“用户已完成编辑”的语义场景，比如保存配置、提交表单前校验。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

• 触发条件：元素失焦（blur） + 值相比聚焦初始值发生了变化
• 对 <input type="text"> 和 <textarea></textarea> 有效；对 type="checkbox" 或 select 也常用
• 示例：// 仅当用户改完并离开该输入框时执行
  inputEl.addEventListener('change', () => { saveToServer(inputEl.value); });

input 和 change 同时监听是否冲突？

不冲突，可以共存。两者目的不同，常配合使用：

立即学习“Java免费学习笔记（深入）”；

• input 做轻量反馈（如红绿提示、禁用提交按钮）
• change 做重量操作（如 API 请求、持久化存储）
• 注意：如果 input 中已提交数据，change 再次提交就可能重复——需根据业务逻辑决定是否禁用其中一者，或加状态标记

补充：别忘了处理 input 元素的初始状态

页面加载后若文本框已有默认值（比如从 URL 参数或 localStorage 恢复），change 不会自动触发。需要手动检查初始值是否与预期一致，必要时主动调用一次校验逻辑。

• 技巧：可保存初始值 const initVal = inputEl.value;，在 change 回调中对比 inputEl.value !== initVal
• 也可用 inputEl.dispatchEvent(new Event('change', { bubbles: true })); 模拟一次 change（慎用，避免副作用）