一、鼠标事件对象
鼠标事件对象.png
target:触发了事件的元素，触发事件的元素不一定是绑定事件的元素
offsetY:鼠标距离自身的Y轴的距离（相对于target的距离）
clientY:鼠标距离窗口的位置
pageY:鼠标距离html页面的距离
练习1：div跟随鼠标移动(假设div相对于父级box定位)
document.onmousemove=function(ev){
var ev = window.event||ev;
var x =ev.clientX-100;//减掉div一半的宽，鼠标就会在div的正中间
var y = ev.clientY-100;
div.style.left = x + "px";
div.style.top = y + "px"
}
练习2：鼠标拖拽
var blueDiv =document.getElementsByClassName("blueDiv")[0];
blueDiv.onmousedown =function(ev){
var ev = window.event||ev;
//把鼠标（0，0）点定在blueDiv的左上角,鼠标在blueDiv
var startX = ev.clientX-blueDiv.offsetLeft;
var startY = ev.clientY-blueDiv.offsetTop;
document.onmousemove=function(ev){
var ev = window.event||ev;
var x =ev.clientX-startX;//减去鼠标相对于div的距离，相当于div的相对于鼠标位置，向左移动了startX的距离，startY同理
var y = ev.clientY-startY;
blueDiv.style.left = x + "px";
blueDiv.style.top = y + "px"
}
}
blueDiv.onmouseup=function(){
document.onmousemove=null;
}
练习3:升级版，给body加2000的height,让div跟随鼠标移动，且不能超过box
div.onmousedown=function(ev){
获取鼠标相对于div的距离
var offsetX = ev.offsetX;
var offsetY = ev.offsetY;
document.onmousemove=function(){
var ev =window.event||ev;
var x = ev.clientX-box.offsetLeft-offsetX-8;
var y = ev.pageY-box.offsetTop-offsetY-8;
if(x<0){
x=0;
}else if(y<0){
y=0;
}
if(x>box.offsetWidth-div.offsetWidth){
x = box.offsetWidth-div.offsetWidth;
}else if(y>box.offsetHeight-div.offsetHeight){
y = box.offsetHeight-div.offsetHeight;
}
div.style.left = x+"px";
div.style.top = y+"px";
}
}
思路：根据鼠标位置计算div的top，left值
获取鼠标的位置，用鼠标的位置的x和y 的值-父级box的offsetLeft-鼠标相对于div的offseX-8个像素的margin,就是div的left和top值
鼠标单击和双击
bug:点击一个双击会执行两次单击，
解决：点击双击以后让单击延迟执行
var timer ;
redDiv.onclick=function(){
clearTimeout(timer);
timer = setTimeout(function(){
console.log("单击")
},300)
}
redDiv.ondblclick=function(){
clearTimeoutl(timer)//清除的是双击中的第二次，第一次已经在单击事件中清除，第二次的时候已经清除了定时器就不会打印
console.log("双击");
}
点击双击，产生的第一次单击会300ms之后打印，第二次也会在300ms后打印，由于手速够快，所以两次单击执行给人感觉是瞬间执行
所以要在单击事件中先清除上一次的单击定时器，如果没按双击，清除的就是空的定时器，不影 响代码执行，如果按了双击，肯定是触发了双击事件，上一次的单击已经在单击事件中清除，再在双击事件中把第二次的定时器清除
二、键盘事件
（1）keydown支持特殊按键（command,shift),keydown下keyCode所代表的按键不区分大小写
（2）keypress不支持特殊按键，且keypress下keyCode区分大小写
判断是否按下组合键
if(ev.keyCode==67&&ev.metaKey){
console.log("按了command+c");
}
（3）方向键控制div移动：上38 下40 左37 右39
练习：
var boolArr =[false,false,false,false];
document.onkeydown=function(ev){
var evObj=window.event||ev;
boolArr[ev.keyCode-37]=true;
}
document.onkeyup=function(ev){
var evObj=window.event||ev;
boolArr[ev.keyCode-37]=false;
}
setInterval(function(){
var speed =5;
var leftSpeed = boolArr[0]*-speed+boolArr[2]*speed;
var topSpeed = boolArr[1]*-speed+boolArr[3]*speed;
redDiv.style.left=redDiv.offsetLeft+leftSpeed+"px";
redDiv.style.top=redDiv.offsetTop+topSpeed+"px";
},10)
设置布尔值：键盘按下的时候根据上下左右的值-37计算出boolArr的下标取到数组元素，按到之后把原本的false变为true;
定时器中也是根据计算的值判断是加还是减