input事件和change事件的区别

今天在监听<input>输入框的内容变化时监听的是change事件，本意是希望输入框内容一发生变化就执行事件监听方法，但是在运行时却发现我在输入框中输入了内容，但是监听事件并没有执行，改用input事件之后才达到了预期。于是，就查看资料了解了change事件和input事件的区别。

input事件和change事件的区别

input事件：输输入框内容发生改变时就会触发

change事件：输入框内容发生改变，并且输入框失去焦点时触发。例如向输入框中输入一长串的内容后按下enter键、点击其他内容等操作之后才会触发change事件。

示例

<template>
  <div>
    <div>
      <p>测试input事件</p>
      <input v-on:input="onInputEvent" />
    </div>
    <div>
      <p>测试change事件</p>
      <input v-on:change="onChangeEvent" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Demo",
  methods: {
    onInputEvent() {
      console.log("====  input 事件触发了");
    },
    onChangeEvent() {
      console.log("====  change 事件触发了");
    },
  },
};
</script>

 从打印结果可以看出同样是向输入框中输入8个数字，input事件执行了8次，而change事件只指向了一次。