jQuery – Keypress和Keydown事件之间的区别 · HowToDoInJava 中文系列教程

# jQuery – `Keypress`和`Keydown`事件之间的区别 > 原文： [https://howtodoinjava.com/jquery/jquery-difference-between-keypress-and-keydown-events/](https://howtodoinjava.com/jquery/jquery-difference-between-keypress-and-keydown-events/) jQuery 支持 3 种类型的键盘事件，而我们是： 1. **`keyup()`**：释放键盘上的某个键时会触发该事件。 2. **`keydown()`**：按下键盘上的某个键时触发事件。 3. **`keypress()`**：按下键盘上的某个键时会触发该事件。根据以上定义，看起来`keydown()`**和**`keypress()`是同一回事。但是，实际上它们并不完全相同。让我们看看它们有何不同。 ## 1）特殊键（例如`CTRL`或`ALT`或`SHIFT`）如果您按下任何特殊键，浏览器将仅触发`keydown()`事件，而不触发`keypress()`事件。 #### 尝试一下尝试按一些常规键，然后按一些特殊键。 ```java <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> var keydownCounter = 0; var keypressCounter = 0; $( document ).ready(function(){ $('#textbox').keydown(function(event){ $('#keydownCounter').html(++keydownCounter); }); $('#textbox').keypress(function(event){ $('#keypressCounter').html(++keypressCounter); }); }); </script> </head> <body> <h4>jQuery keydown() and keypress() difference</h4> <label>TextBox : </label><input id="textbox" type="text" size="50" /> <div> <label>keydown() event fired : </label><span id="keydownCounter">0</span> times. </div> <div> <label>keypress() event fired : </label><span id="keypressCounter">0</span> times. </div> </body> </html> ``` ## 2）捕获键码或键 [ascii](http://www.asciitable.com/ "ascii") 值如果您打字母`a`和`A`（大写字母），则会发现以下事件行为。 1. `keydown()`将显示`a = 65`，`A = 65`（**不区分大小写**）。 2. `keypresss()`将显示`a = 97`，`A = 65`（**区分大小写**）。如果要捕获实际字符键入，请始终使用`keypress()`事件。 #### 试一试尝试在`[Caps Lock]`打开的情况下按一些键，然后再将其关闭。 ```java <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $( document ).ready(function(){ $('#textbox').keydown(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); $('#keydownCode').html(keycode); }); $('#textbox').keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); $('#keypressCode').html(keycode); }); }); </script> </head> <body> <h4>jQuery keydown() and keypress() difference</h4> <label>TextBox : </label><input id="textbox" type="text" size="50" /> <div> <label>keydown() detected keycode : </label><span id="keydownCode">0</span>. </div> <div> <label>keypress() detected keycode : </label><span id="keypressCode">0</span>. </div> </body> </html> ``` `event.keyCode`在 FireFox 中无法运行，但在 IE 中可以完美运行。要在 Firefox 中获取`event.keyCode`，您应该改用`event.which`，jQuery 也会推荐它。所以更好的方法应该是： ```java var keycode =(event.keyCode? event.keyCode: event.which); ``` ## 3）长按任意键在这种情况下，根据文档，`keydown()`事件被触发一次，但是`keypress()`事件将一直触发直到释放键为止。无论如何，这是浏览器特定的行为，我不会建议您使用此功能。这应该仅限于您的知识。 #### 试一试按任意键并保持按下状态。 ```java <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> var keydownCounter = 0; var keypressCounter = 0; $( document ).ready(function(){ $('#textbox').keydown(function(event){ $('#keydownCounter').html(++keydownCounter); }); $('#textbox').keypress(function(event){ $('#keypressCounter').html(++keypressCounter); }); }); </script> </head> <body> <h4>jQuery keydown() and keypress() difference</h4> <label>TextBox : </label><input id="textbox" type="text" size="50" /> <div> <label>keydown() event fired : </label><span id="keydownCounter">0</span> times. </div> <div> <label>keypress() event fired : </label><span id="keypressCounter">0</span> times. </div> </body> </html> ``` 如果以上演示在您的浏览器中不起作用，请不要担心。你不是一个人。请参阅 [http://unixpapa.com/js/key.html](http://unixpapa.com/js/key.html) 中的 2.2 节（自动重复触发的事件）。如果您有任何疑问或建议，请告诉我。 #### 学习愉快！