onKeyPress与。onKeyUp和onKeyDown

这三个事件之间有什么区别？谷歌搜索后发现：

• 在onKeyDown当用户按下一个键触发事件。
• 在onKeyUp当用户释放一个键触发事件。
• onKeyPress当用户按下并释放一个键（onKeyDown后跟onKeyUp）时，将触发该事件。

我了解前两个，但onKeyPress与onKeyUp？是否可以在onKeyUp不按（）的情况下释放键（onKeyDown）？

这有点令人困惑，有人可以帮我解决这个问题吗？

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

从该链接：

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

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 );
}

这里的大多数答案更多地侧重于理论而非实际问题，并且至少在Firefox中（在43中进行了测试），它们之间keyup以及keypress与输入字段值之间存在一些较大差异。

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

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按下键时会触发（例如快捷方式；例如，在中Ctrl+A，Ctrl按住。

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

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

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

首先，它们具有不同的含义：它们触发：

• KeyDown – 按下按键时
• KeyUp – 释放按钮时以及更新输入/文本区域的值之后（其中只有一个）
• KeyPress –在这两者之间，实际上并不表示按键已被按下和释放（请参见下文）。

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

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

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

最后，有一些语用学：

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

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

此文章由Jan沃尔特是我碰上了最好的一块，你可以找到归档副本这里如果链接已经死了。

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

该KEYDOWN事件发生时，按下该键，紧接着的按键事件。然后，释放键时会生成keyup事件。

要理解的区别KEYDOWN和按键，这是区分有用字符和键。一个关键是计算机的键盘上的物理按键。甲字符是通过按压按钮类型的符号。在美国键盘上，4在按住键的同时按下Shift键通常会产生“美元符号”字符。世界上的每个键盘不一定都是这种情况。从理论上讲，keydown和keyup事件表示按下或释放的键，而keypress事件表示正在键入的字符。实际上，这并不总是实现方式。

有一段时间，一些浏览器在按键后立即触发了另一个事件，称为textInput。DOM 3标准的早期版本打算以此来代替按键事件，但是整个概念后来被撤销了。Webkit在525和533版本之间支持此功能，但有人告诉我IE支持它，但我从未检测到，可能是因为Webkit要求将其称为textInput，而IE称为textinput。

还有一个名为input的事件，受所有浏览器支持，该事件在对textarea或input字段进行更改后立即触发。通常，按键将触发，然后键入的字符将出现在文本区域中，然后输入将触发。该输入事件实际上并不给什么键被输入的任何信息-你不得不检查文本框弄明白发生了什么变化-所以我们真的不认为这是一个关键事件，并不能真正在这里记录它。尽管它最初仅是为文本区域和输入框定义的，但我相信在将其推广到其他类型的对象上也有一些发展。

似乎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事件都是在按下键时触发的，而不是在按下键时触发的。

区别在于事件不会被触发一次，而是会被触发多次（只要按住该键即可）。请注意这一点并进行相应处理。

onkeypress事件适用于所有浏览器中的ALT，CTRL，SHIFT，ESC等所有键，而onkeydown事件适用于所有键。意味着onkeydown事件捕获所有键。

只想分享好奇心：

当使用onkeydown事件激活JS方法时，该事件的字符代码与您通过onkeypress获得的字符不同！

例如，在使用onkeypress时，小键盘键将返回与字母键上方的数字键相同的字符，但在使用onkeydown时，返回的字符将不相同！

花了我几秒钟的时间来弄清楚为什么使用onkeydown时检查某些字符代码的脚本失败了！

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

是的。我确实知道方法的定义是不同的..但是令人非常困惑的是，在两种方法中，事件的结果都是使用event.keyCode ..检索的，但是它们没有返回相同的值。声明式实现。

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

更新的答案：

按键

• 按住键时触发多次。
• 触发中继键。

按键

• 按住键时触发多次。
• 难道不火元密钥。

按键

• 释放键时最后触发一次。
• 触发中继键。

这是双方的行为addEventListener和jQuery。

https://jsbin.com/vebaholamu/1/edit?js，控制台，输出 <-尝试示例

（答案已编辑，答案，截图和示例正确无误）

一些实际的事实可能对决定处理哪个事件有用（运行下面的脚本并专注于输入框）：

$('input').on('keyup keydown keypress',e=>console.log(e.type, e.keyCode, e.which, e.key))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>

紧迫：

• 非插入/打字密钥（例如Shift，Ctrl）不会触发keypress。按下Ctrl并释放它：

  按键17 17控制

  键盘17 17控制

• 从适用的字符转换为其他字符的键盘按键可能会导致死亡和复制的“钥匙”（例如~，´上）keydown。按下´并释放它以显示双倍´´：

  按下192192死

  键盘192192´´

  按键180180´

  按键180180´

  键盘192192死

此外，非键入输入（例如range <input type="range">）仍会根据按下的键触发所有的keyup，keydown和keypress事件。