input事件 change事件
2023-04-10 本文已影响0人
malgee
在 HTML 中，<input> 元素用于创建用户可以输入的表单控件，例如文本框、复选框、单选框等。<input> 元素支持多种事件，其中两个常见的事件是 input 事件和 change 事件。
-
input事件：在用户输入或粘贴文本时触发，表示文本框的值已经改变。 -
change事件：在用户输入或粘贴文本并且焦点离开文本框时触发，表示文本框的值已经改变。
两个事件的区别在于触发时机和触发条件不同。input 事件在文本框的值改变时就会触发，而 change 事件需要等到文本框失去焦点时才会触发；同时，input 事件还能在用户粘贴文本时触发，而 change 事件不会。
<!DOCTYPE html>
<html>
<head>
<title>Input and Change Events Example</title>
</head>
<body>
<label for="myInput">Enter your name:</label>
<input type="text" id="myInput">
<p>Current value: <span id="myValue"></span></p>
<script>
var input = document.getElementById('myInput');
var valueDisplay = document.getElementById('myValue');
input.addEventListener('input', function(event) {
console.log('Input event fired!');
console.log('Current value:', event.target.value);
valueDisplay.textContent = event.target.value;
});
input.addEventListener('change', function(event) {
console.log('Change event fired!');
console.log('Current value:', event.target.value);
valueDisplay.textContent = event.target.value;
});
</script>
</body>
</html>
在上面的示例中，我们创建了一个文本框和一个用于显示当前值的 <span> 元素，并为文本框绑定了input 和 change 事件处理程序。当用户输入或粘贴文本时，input 事件会触发，我们可以通过 event.target.value 获取当前文本框的值，并更新 <span> 元素的内容；当用户离开文本框时，change 事件会触发，我们也可以获取当前文本框的值并更新 <span> 元素的内容。
修饰符
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
