一耕突、鼠標(biāo)事件對(duì)象
鼠標(biāo)事件對(duì)象.png
target:觸發(fā)了事件的元素浪秘，觸發(fā)事件的元素不一定是綁定事件的元素
offsetY:鼠標(biāo)距離自身的Y軸的距離（相對(duì)于target的距離）
clientY:鼠標(biāo)距離窗口的位置
pageY:鼠標(biāo)距離html頁面的距離
練習(xí)1：div跟隨鼠標(biāo)移動(dòng)(假設(shè)div相對(duì)于父級(jí)box定位)
document.onmousemove=function(ev){
var ev = window.event||ev;
var x =ev.clientX-100;//減掉div一半的寬，鼠標(biāo)就會(huì)在div的正中間
var y = ev.clientY-100;
div.style.left = x + "px";
div.style.top = y + "px"
}
練習(xí)2：鼠標(biāo)拖拽
var blueDiv =document.getElementsByClassName("blueDiv")[0];
blueDiv.onmousedown =function(ev){
var ev = window.event||ev;
//把鼠標(biāo)（0丁眼，0）點(diǎn)定在blueDiv的左上角,鼠標(biāo)在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;//減去鼠標(biāo)相對(duì)于div的距離筷凤，相當(dāng)于div的相對(duì)于鼠標(biāo)位置，向左移動(dòng)了startX的距離苞七，startY同理
var y = ev.clientY-startY;
blueDiv.style.left = x + "px";
blueDiv.style.top = y + "px"
}
}
blueDiv.onmouseup=function(){
document.onmousemove=null;
}
練習(xí)3:升級(jí)版藐守，給body加2000的height,讓div跟隨鼠標(biāo)移動(dòng)，且不能超過box
div.onmousedown=function(ev){
獲取鼠標(biāo)相對(duì)于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";
}
}
思路：根據(jù)鼠標(biāo)位置計(jì)算div的top蹂风，left值
獲取鼠標(biāo)的位置卢厂，用鼠標(biāo)的位置的x和y 的值-父級(jí)box的offsetLeft-鼠標(biāo)相對(duì)于div的offseX-8個(gè)像素的margin,就是div的left和top值
鼠標(biāo)單擊和雙擊
bug:點(diǎn)擊一個(gè)雙擊會(huì)執(zhí)行兩次單擊，
解決：點(diǎn)擊雙擊以后讓單擊延遲執(zhí)行
var timer ;
redDiv.onclick=function(){
clearTimeout(timer);
timer = setTimeout(function(){
console.log("單擊")
},300)
}
redDiv.ondblclick=function(){
clearTimeoutl(timer)//清除的是雙擊中的第二次，第一次已經(jīng)在單擊事件中清除巢块，第二次的時(shí)候已經(jīng)清除了定時(shí)器就不會(huì)打印
console.log("雙擊");
}
點(diǎn)擊雙擊，產(chǎn)生的第一次單擊會(huì)300ms之后打印族奢，第二次也會(huì)在300ms后打印，由于手速夠快越走，所以兩次單擊執(zhí)行給人感覺是瞬間執(zhí)行
所以要在單擊事件中先清除上一次的單擊定時(shí)器棚品，如果沒按雙擊，清除的就是空的定時(shí)器铜跑，不影 響代碼執(zhí)行，如果按了雙擊锅纺，肯定是觸發(fā)了雙擊事件，上一次的單擊已經(jīng)在單擊事件中清除肋殴，再在雙擊事件中把第二次的定時(shí)器清除
二囤锉、鍵盤事件
（1）keydown支持特殊按鍵（command,shift),keydown下keyCode所代表的按鍵不區(qū)分大小寫
（2）keypress不支持特殊按鍵，且keypress下keyCode區(qū)分大小寫
判斷是否按下組合鍵
if(ev.keyCode==67&&ev.metaKey){
console.log("按了command+c");
}
（3）方向鍵控制div移動(dòng)：上38 下40 左37 右39
練習(xí)：
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)
設(shè)置布爾值：鍵盤按下的時(shí)候根據(jù)上下左右的值-37計(jì)算出boolArr的下標(biāo)取到數(shù)組元素护锤，按到之后把原本的false變?yōu)閠rue;
定時(shí)器中也是根據(jù)計(jì)算的值判斷是加還是減