我观察到的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

这里的大多数答案更多地集中在理论而不是实际问题上，至少在Firefox中(在43中测试)，keyup和keypress在输入字段值方面有一些很大的区别。

如果用户在空的输入元素中输入1:

input元素的值将是按键处理程序中的空字符串(旧值) 在keyup处理程序中，input元素的值将是1(新值)。

如果您所做的工作依赖于知道输入后的新值，而不是当前值，例如内联验证或自动制表符，那么这一点至关重要。

场景:

用户在输入元素中输入12345。 用户选择文本12345。 用户输入字母A。

当输入字母A后触发按键事件时，文本框现在只包含字母A。

But:

Field.val()是12345。 美元Field.val()。长度为5 用户选择是一个空字符串(防止您通过覆盖选择来确定删除了什么)。

这样看来，浏览器(Firefox 43)擦除用户的选择，然后触发按键事件，然后更新字段内容，然后触发keyup。

只是想分享一个好奇心:

当使用onkeydown事件来激活一个JS方法时，该事件的charcode与你使用onkeypress得到的不一样!

例如，当使用onkeypress时，numpad键将返回与字母键上方的数字键相同的字符代码，但当使用onkeydown时则不是!

我花了相当多的时间来弄清楚为什么我的脚本在使用onkeydown时检查某些字符码失败!

演示:https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

是的。我知道方法的定义是不同的。但非常令人困惑的是，在这两个方法中，事件的结果是使用event. keycode ..但是它们不会返回相同的值。不是一个非常声明性的实现。

这篇由Jan Wolter撰写的文章是我所见过的最好的文章，如果链接失效，你可以在这里找到存档副本。

它很好地解释了所有浏览器键事件，

The keydown event occurs when the key is pressed, followed immediately by the keypress event. Then the keyup event is generated when the key is released. To understand the difference between keydown and keypress, it is useful to distinguish between characters and keys. A key is a physical button on the computer's keyboard. A character is a symbol typed by pressing a button. On a US keyboard, hitting the 4 key while holding down the Shift key typically produces a "dollar sign" character. This is not necessarily the case on every keyboard in the world. In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. In practice, this is not always the way it is implemented. For a while, some browers fired an additional event, called textInput, immediately after keypress. Early versions of the DOM 3 standard intended this as a replacement for the keypress event, but the whole notion was later revoked. Webkit supported this between versions 525 and 533, and I'm told IE supported it, but I never detected that, possibly because Webkit required it to be called textInput while IE called it textinput. There is also an event called input, supported by all browsers, which is fired just after a change is made to to a textarea or input field. Typically keypress will fire, then the typed character will appear in the text area, then input will fire. The input event doesn't actually give any information about what key was typed - you'd have to inspect the textbox to figure it out what changed - so we don't really consider it a key event and don't really document it here. Though it was originally defined only for textareas and input boxes, I believe there is some movement toward generalizing it to fire on other types of objects as well.

答:更新

KeyDown

当你按住键时，会触发多次。 触发元键。

键盘按键

当你按住键时，会触发多次。 不触发元键。

KeyUp

当你释放钥匙时，最后会触发一次。 触发元键。

这是addEventListener和jQuery中的行为。

https://jsbin.com/vebaholamu/1/edit?js,console,output <——试试例子

(答案已编辑正确的回答，截图和示例)

基本上，这些事件在不同的浏览器类型和版本上表现不同，我创建了一个小jsBin测试，您可以检查控制台以了解这些事件在您的目标环境中的行为，希望这对您有所帮助。http://jsbin.com/zipivadu/10/edit