# 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 节（自动重复触发的事件）。

如果您有任何疑问或建议，请告诉我。

#### 学习愉快！