DOM 事件（键盘事件）

最新推荐文章于 2022-06-22 16:05:29 发布

lord_of_war

最新推荐文章于 2022-06-22 16:05:29 发布

阅读量738

点赞数

本文链接：https://blog.youkuaiyun.com/lord_of_war/article/details/108437241

版权

本文详细介绍了DOM中的键盘事件，包括onkeydown（在按键被按下时触发）、onkeypress（在按键被按下并释放时触发，但不适用于所有按键）和onkeyup（在按键被松开时触发）。这些事件常用于小游戏控制，如2048、贪吃蛇等，通过监听键盘方向键来控制页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

onkeydown事件

onkeydown 事件会在用户按下一个键盘按键时发生。

提示：与 onkeydown 事件相关联的事件触发次序:

onkeydown
onkeypress
onkeyup

onkeydown事件在很多小游戏上应用较多，比如需要控制上下左右的很多游戏，如2048，贪吃蛇，俄罗斯方块等等。

 keyDown: function () {
            document.onkeydown = function (e) {
                //键盘按下后，判断按下了那个键，并触发相应移动方法
                switch (e.keyCode) {
                    case 37: this.leftmove(); break;
                    case 38: this.upmove(); break;
                    case 39: this.rightmove(); break;
                    case 40: this.downmove(); break;
                }
            }.bind(this);
        }

然后就可以通过键盘上的上下左右的四个箭头的按键控制页面上的元素。

onkeypress 事件

onkeypress 事件会在键盘按键被按下并释放一个键时发生。
要注意的是，在所有浏览器中 onkeypress 事件不是适用于所有按键(如： ALT, CTRL, SHIFT, ESC)。

<p>当用户在输入框内按下一个按键时函数被触发</p>
<input type="text" onkeypress="myFunction()">

function myFunction(){
	alert("你在输入栏内按下一个键");
}

在这里插入图片描述

onkeyup 事件

onkeyup 事件会在键盘按键被松开时发生。

<p>当用户在输入字段释放一个按键时触发函数。函数将字符转换为大写。</p>
输入你的名称: <input type="text" id="fname" onkeyup="myFunction()">

function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}

在这里插入图片描述
在这里我写下的是aaaaaaaa，但是当键盘按键松开的时候就自动转换为了大写显示出来。（由于截图的时候键盘已经松开，所以看不出什么效果）