oninput 和 onchange 事件有什么区别

oninput 和 onchange 是 HTML DOM 中的两种事件，它们通常用于监听输入元素（如 <input>, <textarea>, <select> 等）的值的变化。虽然它们都用于处理输入元素的值的变化，但它们的工作方式和触发时机有所不同。

oninput 事件

oninput 事件在用户输入时触发，即每当元素的值发生变化时，无论这种变化是由于键盘输入、粘贴、拖拽等操作引起的，都会触发 oninput 事件。这意味着，只要元素的值发生了改变，就会立即触发该事件，无需等待用户完成输入或离开输入框。

例如，以下是一个使用 oninput 事件的示例：

html<input type="text" id="myInput" oninput="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("myInput").value;
console.log("Input value: " + x);
}
</script>

在这个例子中，每当用户在输入框中输入字符时，myFunction 函数就会被调用，并将输入框中的值打印到控制台。

onchange 事件

onchange 事件则不同，它只在元素的值发生改变并且元素失去焦点（即用户完成输入并离开输入框）时触发。这意味着，如果用户开始在输入框中输入内容，然后中断输入并离开输入框（例如，通过点击输入框外的其他位置或按 Tab 键），onchange 事件才会触发。

以下是一个使用 onchange 事件的示例：

html<input type="text" id="myInput" onchange="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("myInput").value;
console.log("Input value: " + x);
}
</script>

在这个例子中，只有当用户在输入框中输入内容并离开输入框时（例如，通过点击其他位置或按 Tab 键），myFunction 函数才会被调用，并将输入框中的值打印到控制台。

总结

总的来说，oninput 和 onchange 事件的主要区别在于触发时机：

• oninput 事件在用户输入时触发，无论是否完成输入。
• onchange 事件在元素的值发生改变并且元素失去焦点时触发，即用户完成输入后触发。

选择使用哪个事件取决于你的具体需求。如果你需要在用户输入时实时获取和处理值，可以使用 oninput 事件。如果你只需要在用户完成输入后获取和处理值，可以使用 onchange 事件。