在前端开发中，表单元素（如 input 和 textarea）通常需要监听用户的输入行为，以实时更新页面内容或提交表单数据。这时就需要用到两个事件：change 和 input。
区别
两者的区别在于触发的时机和具体的应用场景。
change 事件
change 事件表示用户对输入元素进行更改后，元素的值已经被提交到服务器。换句话说，只有在输入元素失去焦点之后才会触发 change 事件。
例如，在以下代码中：
<input type="text" onchange="console.log('value changed')" />当用户在此输入框中输入文本并将其更改后，只有在输入框失去焦点时才会显示 "value changed"。
input 事件
相比之下，input 事件则会在每次用户在输入元素中输入、删除或粘贴任何字符时都会触发。它在内容修改后立即触发，不需要等待元素失去焦点。
例如，在以下代码中：
<input type="text" oninput="console.log('input detected')" />当用户在此输入框中输入、删除或粘贴任何字符时，都会立即触发 "input detected"。
应用场景
change 事件的适用场景
由于 change 事件要等到输入元素失去焦点时才会触发，因此它适用于以下场景：
- 当用户更改某些数据并准备提交表单时。
- 当用户选择一系列选项时。
例如，在以下代码中：
<select onchange="console.log('option selected')">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>当用户从下拉列表中选择一个选项并点击“完成”按钮时，才会显示 "option selected"。
input 事件的适用场景
由于 input 事件在内容修改后立即触发，因此可以适用于以下场景：
- 当需要实时监测用户输入的情况，比如实时搜索建议。
- 当需要实时更新页面元素的内容，比如字符计数器。
例如，在以下代码中：
<input type="text" oninput="console.log(this.value)" />
当用户在此输入框中输入、删除或粘贴任何字符时，都会立即显示当前输入框中的值。
指导意义
正确使用 change 和 input 事件可以提升用户体验和网站性能。根据具体的应用场景，合理选择事件类型是十分必要的。
需要注意的是，不同浏览器可能对这两个事件的处理方式有所不同，开发者需要仔细测试确保功能的兼容性。
示例代码
<input type="text" oninput="console.log('input detected')" onchange="console.log('value changed')" />在此示例中，当用户对输入框进行输入时，会立即输出 "input detected"。当用户将焦点移出输入框并更改其值时，会输出 "value changed"。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15025