JS基础(按键事件)
键盘事件：
onkeydown
-按键被按下
-对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
-当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
这种设计是为了防止误操作的发生。
onkeyup
-按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
stopPropagation() 方法
不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
可以通过keyCode来获取按键的编码
通过它可以判断哪个按键被按下
除了keyCode，
事件对象中还提供了几个属性
altKey
ctrlKey
shiftKey
-这个三个用来判断alt ctrl和shift是否被按下
如果按下则返回true，否则返回false
在文本框中输入内容，属于onkeydown的默认行为
如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
对应按键实例：
<style>
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: #FF0000;
position: absolute;
/* transition: all 0.5s linear 0s; */
top: 0;
left: 0;
}
</style>
<script>
window.onload=function (){
// var input=document.getElementsByTagName('input')[0];
// input.onkeydown=function(event){
// event=event || window.event;
// console.log(event.keyCode);
// }
var box1=document.getElementById('box1');
var speed=50;
//用来监听按键按下事件
//event用来接受对应的事件对象(其中就包括按的什么键)
document.onkeydown=function(event){
//event.keyCode时对应的按键编码，有专门的一个表
switch(event.keyCode){
//对应左
case 37:
box1.style.left=box1.offsetLeft-speed+'px';
box1.offsetLeft<=0?box1.style.left=0:0;
break;
//对应上
case 38:
box1.style.top=box1.offsetTop-speed+'px';
box1.offsetTop<=0?box1.style.top=0:0;
break;
//对应右
case 39:
box1.style.left=box1.offsetLeft+speed+'px';
box1.offsetLeft>=document.documentElement.clientWidth-box1.offsetWidth?box1.style.left=document.documentElement.clientWidth-box1.offsetWidth+'px':0;
break;
//对应下
case 40:
box1.style.top=box1.offsetTop+speed+'px';
box1.offsetTop>=document.documentElement.clientHeight-box1.offsetHeight?box1.style.top=document.documentElement.clientHeight-box1.offsetHeight-1+'px':0;
break;
}
}
}
</script>
</head>
<body>
<!-- <input id="inP" type="text" /> -->
<div id="box1"></div>
</body>
浙公网安备 33010602011771号