onKeyPress与。 onKeyUp和onKeyDown

本文翻译自：onKeyPress Vs. onKeyUp and onKeyDown

What is the difference between these three events? 这三个事件之间有什么区别？ Upon Googling I found that 谷歌搜索后，我发现

The KeyDown event is triggered when the user presses a Key. 当用户按下一个键时，将触发KeyDown事件。

The KeyUp event is triggered when the user releases a Key. 用户释放密钥时将触发KeyUp事件。

The KeyPress event is triggered when the user presses & releases a Key. 当用户按下并释放一个键时，将触发KeyPress事件。 (onKeyDown followed by onKeyUp) （onKeyDown，然后是onKeyUp）

I understand the first two, but isn't KeyPress the same as KeyUp ? 我了解前两个，但KeyPress与KeyUp不同吗？ (or is it possible to release a key ( KeyUp ) without pressing ( KeyDown ) it?) （或者是否可以释放一个键（ KeyUp ）而无需按下（ KeyDown ）呢？）

This is a bit confusing, can someone clear this up for me? 这有点令人困惑，有人可以帮我解决这个问题吗？

---

#1楼

参考：https://stackoom.com/question/EFeM/onKeyPress与-onKeyUp和onKeyDown

---

#2楼

It seems that onkeypress and onkeydown do the same (whithin the small difference of shortcut keys already mentioned above). 似乎onkeypress和onkeydown可以做到相同（只是上面已经提到的快捷键的细微差别）。

You can try this: 您可以尝试以下方法：

<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>

And you will see that the events onkeypress and onkeydown are both triggered while the key is pressed and not when the key is pressed. 您会看到onkeypress和onkeydown事件都在按下键时触发，而不是在按下键时触发。

The difference is that the event is triggered not once but many times (as long as you hold the key pressed). 区别在于事件不会被触发一次，而是会被触发多次（只要按住该键即可）。 Be aware of that and handle them accordingly. 请注意这一点并进行相应处理。

---

#3楼

Basically, these events act differently on different browser type and version, I created a little jsBin test and you can check the console for find out how these events behavior for your targeted environment, hope this help. 基本上，这些事件在不同的浏览器类型和版本上的行为有所不同，我创建了一个jsBin测试，您可以检查控制台以了解这些事件在目标环境中的行为，希望能有所帮助。 http://jsbin.com/zipivadu/10/edit http://jsbin.com/zipivadu/10/edit

---

#4楼

The onkeypress event works for all the keys except ALT, CTRL, SHIFT, ESC in all browsers where as onkeydown event works for all keys. onkeypress事件适用于所有浏览器中的ALT，CTRL，SHIFT，ESC等所有键，而onkeydown事件适用于所有键。 Means onkeydown event captures all the keys. 意味着onkeydown事件捕获所有键。

---

#5楼

Check here for the archived link originally used in this answer. 在此处查看此答案中最初使用的存档链接 。

From that link: 从该链接：

In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. 理论上，keydown和keyup事件表示正在按下或释放的键，而keypress事件则表示正在键入的字符。 The implementation of the theory is not same in all browsers. 该理论的实现并非在所有浏览器中都相同。

---

#6楼

KeyPress , KeyUp and KeyDown are analogous to, respectively: Click , MouseUp, and MouseDown . KeyPress ， KeyUp和KeyDown分别类似于： Click ， MouseUp,和MouseDown 。

1. Down happens first Down首先发生
2. Press happens second (when text is entered) Press发生第二次（输入文本时）
3. Up happens last (when text input is complete). Up一次发生（文本输入完成时）。

The exception is webkit , which has an extra event in there: webkit例外，其中有一个额外的事件：

keydown
keypress
textInput     
keyup

Below is a snippet you can use to see for yourself when the events get fired: 下面是一个片段，您可以在事件触发时亲自查看：

 window.addEventListener("keyup", log); window.addEventListener("keypress", log); window.addEventListener("keydown", log); function log(event){ console.log( event.type ); }