首先，它们有不同的含义:它们发射:

KeyDown -当一个键被按下 KeyUp -当按下的按钮被释放时，在input/textarea的值被更新之后(其中唯一的一个) KeyPress -在这些和之间并不意味着按键被按下和释放(见下文)。它不仅具有不一致的语义，而且已弃用，因此不应该使用它(另请参阅此摘要)

其次，一些键触发其中一些事件，而不触发其他事件。例如,

KeyPress忽略删除，箭头，PgUp/PgDn, home/end, ctrl, alt, shift等，而KeyDown和KeyUp不(参见下面关于esc的详细信息); 当你在Windows中通过alt+选项卡切换窗口时，只有alt触发的KeyDown，因为窗口切换发生在任何其他事件之前(并且KeyDown选项卡是由系统阻止的，我想，至少在Chrome 71中)。

另外，你应该记住那个事件。keyCode(和event.which)通常对KeyDown和KeyUp有相同的值，但对KeyPress有不同的值。试试我创造的游乐场。顺便说一句，我注意到一个怪癖:在Chrome浏览器中，当我按ctrl+a和输入/文本区域是空的，为按键触发事件。keyCode(和event.which)等于1!(当输入不为空时，它根本不会触发)。

注意:这些天，使用事件。key是最有用的选项，因为它是跨浏览器、操作系统和事件标准化的(afaik)。

最后，还有一些语用学:

For handling arrows, you'll probably need to use onKeyDown: if user holds ↓, KeyDown fires several times (while KeyUp fires only once when they release the button). Also, in some cases you can easily prevent propagation of KeyDown but can't (or can't that easily) prevent propagation of KeyUp (for instance, if you want to submit on enter without adding newline to the text field). Suprisingly, when you hold a key, say in textarea, both KeyPress and KeyDown fire multiple times (Chrome 71), I'd use KeyDown if I need the event that fires multiple times and KeyUp for single key release. KeyDown is usually better for games when you have to provide better responsiveness to their actions. esc is usually processed via KeyDown: KeyPress doesn't fire and KeyUp behaves differently for inputs and textareas in different browsers (mostly due to loss of focus) If you'd like to adjust height of a text area to the content, you probably won't use onKeyDown but rather onKeyPress (PS ok, it's actually better to use onChange for this case).

我在我的项目中使用了这三个，但不幸的是，我可能忘记了一些语用学。(需要注意的是:还有输入和更改事件)

首先，它们有不同的含义:它们发射:

KeyDown -当一个键被按下 KeyUp -当按下的按钮被释放时，在input/textarea的值被更新之后(其中唯一的一个) KeyPress -在这些和之间并不意味着按键被按下和释放(见下文)。它不仅具有不一致的语义，而且已弃用，因此不应该使用它(另请参阅此摘要)

其次，一些键触发其中一些事件，而不触发其他事件。例如,

KeyPress忽略删除，箭头，PgUp/PgDn, home/end, ctrl, alt, shift等，而KeyDown和KeyUp不(参见下面关于esc的详细信息); 当你在Windows中通过alt+选项卡切换窗口时，只有alt触发的KeyDown，因为窗口切换发生在任何其他事件之前(并且KeyDown选项卡是由系统阻止的，我想，至少在Chrome 71中)。

另外，你应该记住那个事件。keyCode(和event.which)通常对KeyDown和KeyUp有相同的值，但对KeyPress有不同的值。试试我创造的游乐场。顺便说一句，我注意到一个怪癖:在Chrome浏览器中，当我按ctrl+a和输入/文本区域是空的，为按键触发事件。keyCode(和event.which)等于1!(当输入不为空时，它根本不会触发)。

注意:这些天，使用事件。key是最有用的选项，因为它是跨浏览器、操作系统和事件标准化的(afaik)。

最后，还有一些语用学:

For handling arrows, you'll probably need to use onKeyDown: if user holds ↓, KeyDown fires several times (while KeyUp fires only once when they release the button). Also, in some cases you can easily prevent propagation of KeyDown but can't (or can't that easily) prevent propagation of KeyUp (for instance, if you want to submit on enter without adding newline to the text field). Suprisingly, when you hold a key, say in textarea, both KeyPress and KeyDown fire multiple times (Chrome 71), I'd use KeyDown if I need the event that fires multiple times and KeyUp for single key release. KeyDown is usually better for games when you have to provide better responsiveness to their actions. esc is usually processed via KeyDown: KeyPress doesn't fire and KeyUp behaves differently for inputs and textareas in different browsers (mostly due to loss of focus) If you'd like to adjust height of a text area to the content, you probably won't use onKeyDown but rather onKeyPress (PS ok, it's actually better to use onChange for this case).

我在我的项目中使用了这三个，但不幸的是，我可能忘记了一些语用学。(需要注意的是:还有输入和更改事件)

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

从这个链接:

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

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

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

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

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

keydown
keypress
textInput     
keyup

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

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

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

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

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

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

场景:

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

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

But:

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

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

似乎onkeypress和onkeydown做的是一样的(在上面已经提到的快捷键的小差异中)。

你可以试试这个:

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

你会看到onkeypress和onkeydown事件都是在按下键时触发的，而不是在按下键时触发的。

不同之处在于，事件不是一次触发，而是多次触发(只要您按住键)。要意识到这一点，并相应地处理它们。