oninput 和 onchange 是两个常用于处理表单元素（如输入框、选择框等）的 JavaScript 事件。它们的主要区别在于触发时机和触发频率。
oninput 事件
oninput 事件在用户输入内容时触发，这意味着每当用户在输入框中键入、删除或粘贴字符时，该事件都会被触发。因此，oninput 事件的触发频率通常非常高，适用于需要实时响应用户输入的场景。
下面是一个使用 oninput 事件的示例代码：
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>oninput 示例</title> |
|
</head> |
|
<body> |
|
<input type="text" id="myInput" oninput="showInputValue()"> |
|
<p id="output"></p> |
|
<script> |
|
function showInputValue() { |
|
const inputValue = document.getElementById('myInput').value; |
|
document.getElementById('output').textContent = '你输入的内容是: ' + inputValue; |
|
} |
|
</script> |
|
</body> |
|
</html> |
在这个示例中，每当用户在输入框中键入内容时，showInputValue 函数就会被调用，并将输入的内容显示在 <p> 标签中。
onchange 事件
onchange 事件则在用户完成输入并触发某些操作时触发，如失去焦点（例如点击输入框外部或按下 Tab 键）、选择下拉框的选项等。与 oninput 相比，onchange 的触发频率较低，适用于需要在用户完成输入后进行处理的场景。
下面是一个使用 onchange 事件的示例代码：
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>onchange 示例</title> |
|
</head> |
|
<body> |
|
<input type="text" id="myInput" onchange="showChangedValue()"> |
|
<p id="output"></p> |
|
<script> |
|
function showChangedValue() { |
|
const inputValue = document.getElementById('myInput').value; |
|
document.getElementById('output').textContent = '你更改后的内容是: ' + inputValue; |
|
} |
|
</script> |
|
</body> |
|
</html> |
在这个示例中，只有当用户完成输入并触发某个操作时（如点击输入框外部），showChangedValue 函数才会被调用，并将更改后的内容显示在 <p> 标签中。
总结来说，oninput 和 onchange 的主要区别在于触发时机和频率。oninput 适用于需要实时响应用户输入的场景，而 onchange 则适用于在用户完成输入后进行处理的场景。
