<input type="file"/> onChange vs onInput？答案

【问题标题】：<input type="file"/> onChange vs onInput?<input type="file"/> onChange vs onInput？
【发布时间】：2021-01-14 20:25:06
【问题描述】：

据我了解，输入字段的change 和input 事件之间的区别在于，只有当您失去该字段的焦点时才会发生更改。这似乎只对文本字段或组合的日期/时间输入或类似的东西有意义。对于其他类型的输入，在单个事务中发生的多个更改实际上没有意义，这两个事件之间是否存在任何功能差异？特别是文件输入？

【问题讨论】：

对于更具体的信息，MDN 是这类问题的一个非常好的来源。 developer.mozilla.org/en-US/docs/Web/API/HTMLElement/…
是的，但是 react 将 onChange 事件附加到输入事件，因此区别可能微不足道，并且在某些代码库上无法区分。值得注意的是，on change 应该触发每个更改，但由于他们处理它的方式，它不会做出反应。如果您使用的是反应，那可能是混乱的根源。这是一个相关的帖子：stackoverflow.com/questions/38256332/…。

【解决方案1】：

任何表单域（隐藏的表单域除外）都可以获得/失去焦点（select、textarea、button 等）。 change 事件仅在您想要延迟回调的执行直到任何编辑完成时使用，而 input 用于“实时”执行回调，这对于评估密码等事情很有用例如强度、有效性检查或过滤结果。

【讨论】：

【解决方案2】：

只要元素的值发生变化，input 事件就会发生。 change 事件在新值提交时发生。

对于大多数元素，这些是同时发生的：选中复选框、切换单选按钮、从菜单中选择新选项。

但有些元素在用户修改它们时具有中间状态。更新文本输入时，input 事件会立即发生，但 change 事件不会发生，直到您通过失去焦点提交更改或提交表单。我还没有测试过，但我认为滑块会在您拖动拇指时触发input，但在您释放它之前不会触发change。

【讨论】：