MDN 官方解释:
**change 事件
当用户更改<input>、<select>和<textarea> 元素的值并提交这个更改时,change 事件在这些元素上触发。和 input 事件不一样,change 事件并不是每次元素的 value 改变时都会触发。
主要是触发机制不同:
当<input type="text">获得焦点focus 和失去焦点blur 和change的触发机制不同
<input type="text">
<script>
let input = document.querySelector('input')
//只要输入框获取焦点就会触发这个事件
input.addEventListener('focus', function () {
alert(111)
})
//只要输入框失去焦点就会触发这个事件
input.addEventListener('blur', function () {
alert(222)
})
</script>
change事件的触发机制
<script>
// 鼠标在空输入框获得或失去焦点并不会触发事件 只有文本框的内容发生改变了点击输入框的其他任何位
// 置就会触发这个事件
input.addEventListener('change', function () {
alert(333)
})
</script>