注意 KeyPress现在已弃用。使用KeyDown来代替。

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

1. Down 先发生
2. Press 第二次发生（输入文本时）
3. Up 最后发生（当文本输入完成时）。

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

keydown
keypress
textInput     
keyup

以下是您可以在事件触发时自己查看的片段：

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

在此处查看此答案中最初使用的存档链接。

从该链接：

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

大部分的答案在这里更侧重于理论而不是实际的问题，并有存在着很大的差异keyup，并keypress因为它涉及到输入字段值，至少在Firefox（43测试）。

如果用户1输入一个空的 input 元素：

1. 输入元素的值将是keypress处理程序内的空字符串（旧值）

2. 输入元素的值将是处理程序1内的（新值）keyup。

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

设想：

1. 用户键入12345输入元素。
2. 用户选择文本12345。
3. 用户键入字母A。

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

但：

1. Field.val() 是12345.
2. $Field.val().length 是 5
3. 用户选择是一个空字符串（防止您确定通过覆盖选择删除了什么）。

因此，浏览器（Firefox 43）似乎会擦除用户的选择，然后触发keypress事件，然后更新字段内容，然后触发keyup.

onkeydown当键按下时触发（就像在快捷键中一样；例如， in Ctrl+A，Ctrl被按住“按下”。

onkeyup 释放键时触发（包括修饰符/等键）

onkeypress被烧制的组合onkeydown和onkeyup，或根据键盘重复（当onkeyup不触发）。（这种重复行为是我没有测试过的。如果你做了测试，请添加评论！）

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

首先，它们有不同的含义：它们开火：

• KeyDown – 当一个键被按下时
• KeyUp – 当一个按钮被释放时，并且在input/textarea 的值被更新后（其中唯一的一个）
• KeyPress – 在这些和之间实际上并不意味着按下和释放一个键（见下文）。它不仅语义不一致，而且已被弃用，因此人们可能不应该使用它（另请参阅此摘要）

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

• 按键响应忽略delete，箭头，PgUp/ PgDn，home/ end，ctrl，alt，shift等等而KeyDown和KEYUP不（见关于细节esc下文）;
• 当您在 Windows 中通过alt+切换窗口时tab，只有 KeyDown foralt触发，因为窗口切换发生在任何其他事件之前（并且 KeyDown fortab被系统阻止，我想，至少在 Chrome 71 中）。

此外，您应该记住，event.keyCode（和event.which）通常对于 KeyDown 和 KeyUp 具有相同的值，但对于 KeyPress 具有不同的值。试试我创建的游乐场。顺便说一下，我注意到了一个奇怪的现象：在 Chrome 中，当我按下ctrl+a并且input/textarea为空时，KeyPress 会以event.keyCode（和event.which）等于1! （当输入不为空时，它根本不会触发）。

最后，还有一些语用学：

• 对于处理箭头，您可能需要使用 onKeyDown：如果用户↓按住 ，则 KeyDown 会触发多次（而 KeyUp 在释放按钮时仅触发一次）。此外，在某些情况下，您可以轻松阻止 KeyDown 的传播，但不能（或不能那么容易）阻止 KeyUp 的传播（例如，如果您想在不向文本字段添加换行符的情况下在输入时提交）。
• 令人惊讶的是，当你按住一个键时，比如在 中textarea，KeyPress 和 KeyDown 都会触发多次（Chrome 71），如果我需要多次触发的事件和 KeyUp 用于单键释放，我会使用 KeyDown。
• 当您必须对游戏的操作提供更好的响应时，KeyDown 通常更适合游戏。
• esc通常通过 KeyDown 处理：KeyPress 不会触发，并且 KeyUp 对inputs 和textareas 在不同浏览器中的行为不同（主要是由于失去焦点）
• 如果您想根据内容调整文本区域的高度，您可能不会使用 onKeyDown 而是使用 onKeyPress （PS 好的，实际上在这种情况下使用 onChange 更好）。

我在我的项目中使用了所有 3 个，但不幸的是可能忘记了一些语用学。（要注意：还有input和change事件）