javaScript中的键盘事件

最新推荐文章于 2022-12-16 09:26:35 发布

晗晗想吃烤鱼

最新推荐文章于 2022-12-16 09:26:35 发布

阅读量1.4k

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_66990569/article/details/127270611

版权

键盘事件

onkeydown

键盘上的某个键被按下时触发

        //按键被按下后触发一个函数
    document.onkeydown = function(){

             //弹出显示键盘上有键被按下
             alert("键盘上有键被按下")
        }

onkeydown

键盘上的某个键被松开时触发

    //按键被松开后触发一个函数
document.onkeyup = function(){

        //弹出显示键盘上有键被松开
            alert("键盘上有键被松开")
        }

onkeypress

键盘上的某个键被按下时触发(不能识别功能键；如shift Alt 等并且区分大小写)

键盘事件对象

键盘事件对象属性：keyCode

keyCode返回按键在ASCII码对照表中的值，利用keyCode可判断键盘上的哪个键被按下

扩展：Event对象

event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等,event对象只在事件发生的过程中才有效.event的某些属性只对特定的事件有意义.

event中的属性：

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

在进行判断按下的键时要配合event对象一起使用例：

    document.onkeydown = function(){
            //判断按下的按键是否为ascll码表中值为49的键
			if(event.keyCode ==49){
                //弹出提示
				alert("您按下了1键")
			}
		}

案例

通过上下左右按键实现方块移动实验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			#content{
				width: 700px;
				height: 700px;
				background-color: #000000;
				margin:auto;
				position: relative;/* 相对定位 */
			}
		</style>

	</head>
	<body>
		<div id="content">
			<div id="move_div" style="background-color: green;width: 100px;
			height: 100px;position: relative;top: 0;left: 0;"></div>
		</div>
		<script type="text/javascript">
			//onkeydown:键盘上的键被按下时触发的事件
			document.onkeydown=function(){
				var move_div=document.getElementById("move_div")
				//获取div的宽度和高度,getComputedStyle():用来获取标签的样式
				var x=getComputedStyle(document.getElementById("content")).width
				var y=getComputedStyle(document.getElementById("content")).height
//				alert(x)
				if(event.keyCode==39){//向右移动
					if(parseInt(move_div.style.left)>=parseInt(x)-100){
						alert("已经到最右边了")
					}else{
						move_div.style.left=(parseInt(move_div.style.left)+5)+"px"
					}
					
				}else if(event.keyCode==40){//向下移动
					if(parseInt(move_div.style.top)>=parseInt(y)-100){
						alert("已经到最下边了")
					}else{
						move_div.style.top=(parseInt(move_div.style.top)+5)+"px"
					}
					
				}else if(event.keyCode==37){//向左移动
					if(parseInt(move_div.style.left)==0){
						alert("已经到最左边了")
					}else{
						move_div.style.left=(parseInt(move_div.style.left)-5)+"px"
					}
					
				}else if(event.keyCode==38){//向上移动
					if(parseInt(move_div.style.top)==0){
						alert("已经到最顶端了")
					}else{
						move_div.style.top=(parseInt(move_div.style.top)-5)+"px"
					}
					
				}
			}
		</script>
	</body>
</html>