键盘事件:
onkeydown 按键被按下
如果一直按着某个按键不松手，则事件会一直触发
当onkeydown连续触发时，第一次和第二次之间的间隔会稍微长一点，其他的会非常的快，这种设计是为了防止误操作
onkeyup 按键被松开
键盘事件—般都会绑定给一些可以获取到焦点的对象或者是document
键盘事件绑定给document
keyCode
可以通过keyCode来获取按键的编码,通过它可以判断哪个按键被按下
除了keycode，事件对象中还提供了几个属性
altKey、ctrlKey、shiftKey
这个三个用来判断alt、ctrl和shift是否被按下
如果按下返回true，否则返回false
<script>
document.onkeydown=function(event){
event=event || window.event
//可以通过keyCode来获取按键的编码,通过它可以判断哪个按键被按下
//console.log(event.keyCode);
//判断Crtl和a是否同时被按下
if(event.keyCode==65 && event.ctrlKey){
console.log("Crtl和a键被同时按下");
}
};
document.onkeyup=function(){
console.log("按键松开了");
};
</script>
键盘事件绑定给获取到焦点的对象
<body>
<input type="text" />
</body>
<script>
var input=document.getElementsByTagName("input")[0];
input.onkeydown=function(event){
event=event || window.event;
//console.log("按键被按下");
//使文本框中不能输入数字 数字编码：96-105
if(event.keyCode>=96 && event.keyCode<=105){
//在文本框中输入内容，属于onkeydown的默认行为
//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
return false;
//console.log(event.keyCode);
}
};
</script>
练习：使div可以根据不同的方向键向不同的方向移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
<script>
//为document绑定一个按键按下的事件
document.onkeydown=function(event){
event=event || window.event;
//var box1=document.getElementById("box1");
//定义一个变量，来表示移动的速度
var speed=10;
//当用户同时按住Crtl以后，速度加快
if(event.ctrlKey){
speed=50;
}
//37左 38上 39右 40下
switch(event.keyCode){
case 37:
//alert("左");
box1.style.left = box1.offsetLeft-speed+"px";
break;
case 39:
//alert("右");
box1.style.left=box1.offsetLeft+speed+"px";
break;
case 38:
//alert("上");
box1.style.top=box1.offsetTop-speed+"px";
break;
case 40:
//alert("下");
box1.style.top=box1.offsetTop+speed+"px";
break;
}
};
</script>
</html>
上面练习升级版，连续运动不卡顿
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
<script>
//定义一个变量，来表示移动的速度
var speed=10;
//创建一个变量表示方向
//通过修改dir影响box1移动的方向
var dir=0;
//开启一个定时器，控制div的移动
setInterval(function(){
//37左 38上 39右 40下
switch(dir){
case 37:
//alert("左");
box1.style.left = box1.offsetLeft-speed+"px";
break;
case 39:
//alert("右");
box1.style.left=box1.offsetLeft+speed+"px";
break;
case 38:
//alert("上");
box1.style.top=box1.offsetTop-speed+"px";
break;
case 40:
//alert("下");
box1.style.top=box1.offsetTop+speed+"px";
break;
}
},30);
//为document绑定一个按键按下的事件
document.onkeydown=function(event){
event=event || window.event;
//var box1=document.getElementById("box1");
//当用户同时按住Crtl以后，速度加快
if(event.ctrlKey){
speed=50;
}
//使dir等于按键的值
dir=event.keyCode;
};
//当按键松开时，div不再移动
document.onkeyup=function(){
//设置dir方向为0
dir=0;
//松手速度恢复10
speed=10;
};
</script>
</html>
