javascript KeyDown、KeyPress和KeyUp事件的区别与联系

JavaScript中的KeyDown、KeyPress和KeyUp都是键盘事件，但它们有着不同的用途和特点。

1. KeyDown事件

当用户在页面中按下键盘上的任意一个键时，就会触发KeyDown事件。KeyDown事件可以同时捕获特殊键，例如Ctrl、Shift、Alt、Tab等，还可以捕获功能键（F1~F12）。

下面是一个演示用JS实现监听按键功能的例子：

<!DOCTYPE html>
<html>
<body>

<p>请按键</p>

<script>
document.addEventListener("keydown", function(event) {
    if (event.ctrlKey && event.keyCode === 13) {
        alert("你按下了Ctrl + Enter!");
    }
});
</script>

</body>
</html>

上面的代码中，我们用addEventListener方法来监听KeyDown事件，在事件处理函数里判断当同时按下Ctrl键和Enter键时弹出一个提示框，告诉用户“你按下了Ctrl + Enter!”。

2. KeyPress事件

KeyPress事件与KeyDown事件有些相似，但它是当网页或文档中的字符键被按下时触发。它不能用来监听特殊键或功能键，只可以监听普通字母、数字和符号等键。KeyPress事件在按住键不放时会一直不停地触发。

下面是一个演示使用JS监听KeyPress事件的例子：

<!DOCTYPE html>
<html>
<body>

<p>请按下字母键或数字键</p>

<script>
document.addEventListener("keypress", function(event) {
    document.body.innerHTML += String.fromCharCode(event.keyCode);
});
</script>

</body>
</html>

上面代码中，我们用addEventListener方法来监听KeyPress事件，在事件处理函数里获得键码并使用fromCharCode方法将其转换为字符，然后将字符添加到页面内容的尾部来展示用户输入的字母或数字。

3. KeyUp事件

KeyUp事件在按键释放时，在按键弹起的瞬间触发该事件。和KeyDown事件一样，能够同时捕获特殊键，例如Ctrl、Shift、Alt、Tab等，还可以捕获功能键（F1~F12）。

下面是一个演示用JS实现监听松开按键功能的例子：

<!DOCTYPE html>
<html>
<body>

<p>请按键</p>

<script>
document.addEventListener("keyup", function(event) {
    if (event.ctrlKey && event.keyCode === 13) {
        alert("你松开了Ctrl + Enter!");
    }
});
</script>

</body>
</html>

在上面的代码中，我们开启一个监听KeyUp事件的事件处理函数，当松开Ctrl键和Enter键时弹出一个提示框，告诉用户“你松开了Ctrl + Enter!”。

三个事件的区别总结如下：

KeyDown事件在按键按下瞬间触发，触发时间比KeyUp和KeyPress事件都快。
KeyPress事件只能用来监听普通字母、数字和符号等键，不能监听特殊键和功能键，而这些键可以被KeyDown和KeyUp事件捕获。
KeyDown和KeyUp事件可以捕获特殊键、功能键以及普通字母、数字和符号等键。KeyDown事件可以在按键一直被按下时重复触发，KeyUp事件在按键松开时触发。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript KeyDown、KeyPress和KeyUp事件的区别与联系 - Python技术站

javascript KeyDown、KeyPress和KeyUp事件的区别与联系

1. KeyDown事件

2. KeyPress事件

3. KeyUp事件

相关文章