应使用 input 事件而非 click 事件监听输入内容变化，因 click 仅触发聚焦且无法捕获输入行为；input 事件覆盖键盘、粘贴、语音等多种输入方式，但需配合 compositionstart/end 处理中文输入法上屏逻辑，并通过事件委托统一管理动态添加的输入框。
input 标签本身不靠“点击”来触发值变化，所以监听 click 事件对获取输入内容毫无意义——它只告诉你用户点了这个框，但没告诉你输没输、输了多少。
你要的不是点击，是值变化的实时响应。直接上 input 事件，别绕弯。
为什么不能用 click 监听输入行为
点击 input 元素只会触发聚焦（focus），不会反映内容变更。常见误操作包括：
- 绑定
onclick后发现输完内容也不执行逻辑 - 以为点一下就能读到最新值，结果拿到的是旧值或空字符串
- 在移动端软键盘弹出后，
click可能根本不触发（尤其 Safari）
input 事件才是正解：支持所有输入方式
它在用户完成一次输入动作后立即触发，覆盖：
- 键盘敲击（含删除、回退）
- 鼠标粘贴（Ctrl+V / Cmd+V）
- 拖拽文本进输入框
- 移动端语音输入、emoji 面板选词、软键盘「粘贴」按钮
- 中文输入法确认上屏（如拼音打完按空格/回车）
但注意：input 不响应 JS 赋值（el.value = 'xxx'）和浏览器自动填充（autofill），除非你手动补发事件：el.dispatchEvent(new Event('input', { bubbles: true }))。
中文输入法下必须加 compositionstart/compositionend
否则用户打「shu」还没选词，你就把「shu」当有效输入发请求了——这是最常被忽略的体验断点。
- 设一个
isComposing = false标志位 - 监听
compositionstart→ 设为true - 监听
compositionend→ 设为false，再执行搜索或校验 -
input回调里加守卫：if (!isComposing) { /* 处理真实值 */ }
动态添加的 input 怎么办？别一个个绑
用事件委托，监听父容器即可：
form.addEventListener('input', e => {
if (e.target.matches('input:not([type="checkbox"]):not([type="radio"]), textarea')) {
console.log('值变了:', e.target.value);
}
});
注意过滤掉 checkbox 和 radio——它们压根不触发 input 事件；select 虽然部分浏览器支持，但实际中仍推荐用 change。
真正难的不是绑定，是判断“这次输入是否该算数”。中文输入法、防抖时机、初始值同步、移动端软键盘延迟——这些细节堆起来，才决定用户是觉得流畅，还是卡顿又错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
