Javascript onkeydown和onkeyup之间的行为差异

想知道是否有人可以帮助我解决keyup和keydown之间的差异，以及为什么它们的工作方式不同

我在这里有一个jsfiddle，我在这里做了一些示例

HTML:

---

为什么keydown会落后1个字符，而keyup总是在按下键后立即输出输入的键。例如，我会在第二个框中键入“foo”，但只获取“fo”作为值。但是，如果我在第一个框中键入“foo”，我会得到“foo”作为值。

keydown

是第一次按下键的时候。元素的值尚未更改。这是一种可以取消更改值的方法

---

keyup

是当元素被释放时，并且在2之间，元素的值发生了变化。

当用户按键时，keydown和keyup事件会触发

keydown

：当用户按键时激发。当用户按下按键时，它会重复

---

keyup

：在执行某个键的默认操作后，当用户释放该键时触发。

如果您注销

event.key

，则输入框值在

keydown

时不会立即更改，但您可以捕获按下的键。您正在将

this.value

设置为输入的值，当

keydown

触发时，该值尚未更新。在尝试搜索此问题的答案时，我已多次看到此答案，但为什么这只对类似的问题有关。但是，如果你在按下键时将其更改为警报，它的功能与按下键相同。@Hudspeth，因为那里有一个

keyup

。这就是我想说的。对我来说，如果我把某个东西连接到keydown来设置某个东西的值，那么只要按下该键，它就会设置该值。但这种行为并不是我所期望的，只有基普有这种行为。也许我只是在读更多的东西。@Hudspeth就像我说的，

keydown

是一个用来取消的钩子。好的，很酷，谢谢。这是有道理的，否则，如果它们没有某种不同的功能，它们之间的区别会是什么。

<div id="exercise">
    <div>
        <input type="text" v-on:keyup="listen">
        <p>{{ value }}</p>
    </div>
    <div>
        <input type="text" v-on:keydown="listen">
        <p>{{ value }}</p>
    </div>
</div>

new Vue({
    el: '#exercise',
    data: {
        value: ''
    },
    methods: {
      listen: function(){
        this.value = event.target.value;
      }
    }
});