oninput 和 onchange 事件的区别

oninput 和 onchange 是两个常用于处理表单元素（如输入框、选择框等）的 JavaScript 事件。它们的主要区别在于触发时机和触发频率。

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 事件则在用户完成输入并触发某些操作时触发，如失去焦点（例如点击输入框外部或按下 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>`