事件对象（event）--鼠标、键盘

一、鼠标事件对象

鼠标事件对象.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;
定时器中也是根据计算的值判断是加还是减