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 節（自動重復觸發的事件）。如果您有任何疑問或建議，請告訴我。 #### 學習愉快！