DOM 事件(键盘事件)

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("你在输入栏内按下一个键");
}

在这里插入图片描述
DOM 事件(键盘事件)_第1张图片

onkeyup 事件

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

<p>当用户在输入字段释放一个按键时触发函数。函数将字符转换为大写。p>
输入你的名称: <input type="text" id="fname" onkeyup="myFunction()">
function myFunction(){
     
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}

在这里插入图片描述
在这里我写下的是aaaaaaaa,但是当键盘按键松开的时候就自动转换为了大写显示出来。(由于截图的时候键盘已经松开,所以看不出什么效果)
DOM 事件(键盘事件)_第2张图片

你可能感兴趣的:(DOM 事件(键盘事件))