JavaScript键盘事件
什么是键盘事件？
键盘事件就是我们对键盘的操作，如敲击某个键，按住某个键不放，或者按某个组合快捷键，这些都是键盘事件。
onkeydown: 键盘被按下事件
如果一直按着某个键不松开，则会一直触发该事件
当onkeydown事件连续触发时，第一次和第二次之间的间隔时间稍微长一点，其他则会非常快。这是为了防止误操作的发生
onkeyup: 键盘被松开的事件
键盘事件一般都会绑定给一些可以获取焦点的对象或则是document
可以通过keyCode来获取按键的编码，通过它可以判断哪个键被按下
除了keyCode，事件对象中还提供了几个属性，分别是altKey、ctrlKey、shiftKey
这三个属性分别是用来判断 alt、 cltrl、 shift是否被按下的，如果被按下了则返回true，否则返回false
JavaScript事件———拖拽
什么是拖拽？
拖拽在web开发中的拖拽标准是在HTML5中定义规范的。拖拽作为一项交互行为被广泛应用于电脑桌面。甚至在HTML5之前，拖拽也是被广泛应用的，只不过过程过于繁琐。
当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能异常，这是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false 来取消默认行为，但是这个对IE8一下不起作用
拖拽的流程分为三步：
- 当鼠标被拖拽元素按下时，开始拖拽
2.当鼠标移动时被拖拽的元素跟着鼠标移动
3.当鼠标松开时，被拖拽元素固定在当前位置
onmousedown 当鼠标被拖拽元素按下时，开始拖拽
onmousemove 当鼠标移动时被拖拽的元素跟着鼠标移动
onmouseup 当鼠标松开时，被拖拽元素固定在当前位置
以下是拖拽事件的一个小案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽</title>
<style>
div{
width:100px;
height: 100px;
background: #F88B8D;
position:absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
window.οnlοad=function(){
var box=document.getElementById("box");
box.οnmοusedοwn=function(event){
event=event||window.event;
var ol=event.clientX-box.offsetLeft;
var ot=event.clientY-box.offsetTop;
document.οnmοusemοve=function(event){
event=event||window.event;
var left=event.clientX;
var top=event.clientY;
box.style.left=left-ol+"px";
box.style.top=top-ot+"px";
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
return false;
}
}
</script>
</body>
</html>
以下是小案例的效果图：
拖拽事件发生前，元素的宽高都为100px
拖拽事件发生后，元素的宽高发生变化，从而达到移动的效果。
