jQuery – Keypress和Keydown事件之间的区别
原文： https://howtodoinjava.com/jquery/jquery-difference-between-keypress-and-keydown-events/
jQuery 支持 3 种类型的键盘事件，而我们是：
keyup()：释放键盘上的某个键时会触发该事件。keydown()：按下键盘上的某个键时触发事件。keypress()：按下键盘上的某个键时会触发该事件。
根据以上定义，看起来keydown()和keypress()是同一回事。 但是，实际上它们并不完全相同。
让我们看看它们有何不同。
1）特殊键（例如CTRL或ALT或SHIFT）
如果您按下任何特殊键，浏览器将仅触发keydown()事件，而不触发keypress()事件。
尝试一下
尝试按一些常规键，然后按一些特殊键。
<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 值
如果您打字母a和A（大写字母），则会发现以下事件行为。
keydown()将显示a = 65，A = 65（不区分大小写）。keypresss()将显示a = 97，A = 65（区分大小写）。
如果要捕获实际字符键入，请始终使用keypress()事件。
试一试
尝试在[Caps Lock]打开的情况下按一些键，然后再将其关闭。
<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 也会推荐它。 所以更好的方法应该是：
var keycode =(event.keyCode? event.keyCode: event.which);
3）长按任意键
在这种情况下，根据文档，keydown()事件被触发一次，但是keypress()事件将一直触发直到释放键为止。 无论如何，这是浏览器特定的行为，我不会建议您使用此功能。 这应该仅限于您的知识。
试一试
按任意键并保持按下状态。
<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 中的 2.2 节（自动重复触发的事件）。
如果您有任何疑问或建议，请告诉我。