一、鼠標事件對象

鼠標事件對象.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;
定時器中也是根據計算的值判斷是加還是減