我观察到的keyup和keydown之间的区别是

如果我们为keydown事件附加一个事件处理程序，并记录输入框的值，即 (e.target.value)它返回keydown事件之前的值

但是如果我们为keyup事件附加一个事件处理程序并记录输入框的值 它返回最新的值，包括被按下的键

让我们用例子来理解

// the latest keypressed is not shown in e.target.value
// when keydown event handler is executed
// since until the keyup is not triggered 
// the input box will not have that character in its value
const searchCitiesEleKeyDown = document.querySelector("#searchCities");
searchCitiesEleKeyDown.addEventListener("keydown", (e) => {
  console.log(e.target.value);
});


// but in case of keyup event the e.target.value prints 
// the text box content with the latest character pressed
// since as soon as the keyup event triggers
// the input box will have that character pressed in its value
const searchCitiesEleKeyUp = document.querySelector("#searchCities");
searchCitiesEleKeyUp.addEventListener("keyup", (e) => {
  console.log(e.target.value);
});
<input type="text" id="searchCities" />

CodeSandbox链接 https://codesandbox.io/s/keydown-vs-keyup-wpj33m

当键按下时，Onkeydown被触发(就像在快捷键;例如，在Ctrl+A中，按下Ctrl键。

Onkeyup在按键释放时被触发(包括modifier/etc按键)

Onkeypress被触发为onkeydown和onkeyup的组合，或者取决于键盘重复(当onkeyup没有被触发时)。(我还没有测试过这种重复行为。如果要测试，请添加注释!)

textInput(仅webkit)在输入一些文本时被触发(例如，Shift+A将输入大写的“A”，但Ctrl+A将选择文本而不输入任何文本输入。在这种情况下，所有其他事件被触发)

点击这里查看这个答案中最初使用的存档链接。

从这个链接:

理论上，onKeyDown和onKeyUp事件表示正在按下或释放的键，而onKeyPress事件表示正在键入的字符。该理论在所有浏览器中的实现并不相同。

我观察到的keyup和keydown之间的区别是

如果我们为keydown事件附加一个事件处理程序，并记录输入框的值，即 (e.target.value)它返回keydown事件之前的值

但是如果我们为keyup事件附加一个事件处理程序并记录输入框的值 它返回最新的值，包括被按下的键

让我们用例子来理解

// the latest keypressed is not shown in e.target.value
// when keydown event handler is executed
// since until the keyup is not triggered 
// the input box will not have that character in its value
const searchCitiesEleKeyDown = document.querySelector("#searchCities");
searchCitiesEleKeyDown.addEventListener("keydown", (e) => {
  console.log(e.target.value);
});


// but in case of keyup event the e.target.value prints 
// the text box content with the latest character pressed
// since as soon as the keyup event triggers
// the input box will have that character pressed in its value
const searchCitiesEleKeyUp = document.querySelector("#searchCities");
searchCitiesEleKeyUp.addEventListener("keyup", (e) => {
  console.log(e.target.value);
});
<input type="text" id="searchCities" />

CodeSandbox链接 https://codesandbox.io/s/keydown-vs-keyup-wpj33m

onkeypress事件适用于所有浏览器中除ALT, CTRL, SHIFT, ESC以外的所有键，其中onkeydown事件适用于所有键。意思是onkeydown事件捕获所有的键。

“KeyPress”现已弃用。请使用KeyDown键。

KeyPress, KeyUp和KeyDown分别类似于:Click, MouseUp和MouseDown。

先下 第二个按键发生(当输入文本时) Up发生在最后(当文本输入完成时)。

webkit是个例外，它有一个额外的事件:

keydown
keypress
textInput     
keyup

下面是一个片段，你可以自己看看什么时候事件被触发:

窗口。addEventListener(“弹起”,日志); 窗口。addEventListener(“键盘按键”,日志); 窗口。addEventListener(“keydown”、日志); 对数函数(事件){ console.log(事件。类型); ｝