click：單擊事件。
dblclick：雙擊事件靶剑。
mousedown：按下鼠標(biāo)鍵時(shí)觸發(fā)剩辟。
mouseup：釋放按下的鼠標(biāo)鍵時(shí)觸發(fā)。
mousemove：鼠標(biāo)移動(dòng)事件躯保。
mouseover：移入事件旋膳。
mouseout：移出事件。
mouseenter：移入事件途事。
mouseleave：移出事件验懊。
contextmenu：右鍵事件。
mouseover事件和mouseenter事件盯孙，都是鼠標(biāo)進(jìn)入一個(gè)節(jié)點(diǎn)時(shí)觸發(fā)鲁森。兩者的區(qū)別是，mouseenter事件只觸發(fā)一次振惰，而只要鼠標(biāo)在節(jié)點(diǎn)內(nèi)部移動(dòng)歌溉，mouseover事件會在子節(jié)點(diǎn)上觸發(fā)多次。
var div = document.getElementById("div")
var p = document.getElementById("p")
div.onmouseover=function(){
console.log("div")
}
p.onmouseover=function(){
console.log("p")
} //冒泡階段
div.onmouseenter=function(){
console.log("div")
}
p.onmouseenter=function(){
console.log("p")
} //捕獲階段
鼠標(biāo)事件屬性
MouseEvent.altKey
MouseEvent.ctrlKey
MouseEvent.metaKey
MouseEvent.shiftKey
分別代表鼠標(biāo)事件發(fā)生時(shí)骑晶，是否按下了對應(yīng)的鍵盤按鍵痛垛。返回值為布爾值。
document.body.onclick=function(e){
e=e||window.event
console.log("altKey:"+e.altKey); //是否按下alt鍵
console.log("ctrlKey:"+e.ctrlKey); //是否按下Ctrl鍵
console.log("metaKey:"+e.metaKey); //是否按下meta鍵
console.log("shiftKey:"+e.shiftKey); //是否按下shift鍵
}
MouseEvent.button屬性返回一個(gè)數(shù)值桶蛔，表示事件發(fā)生時(shí)按下了鼠標(biāo)的哪個(gè)鍵匙头。
0代表左鍵
1代表中鍵
2代表右鍵
document.body.onmousedown=function(e){
e=e||window.event
console.log(e.button)
}
MouseEvent.clientX，MouseEvent.clientY
MouseEvent.clientX屬性返回鼠標(biāo)位置相對于瀏覽器窗口左上角的水平坐標(biāo)仔雷，
MouseEvent.clientY屬性返回鼠標(biāo)位置相對于瀏覽器窗口左上角的垂直坐標(biāo)蹂析，
這兩個(gè)屬性都是只讀屬性舔示。
document.body.onmousedown=function(e){
e=e||window.event
console.log(e.clientX,e.clientY)
}
MouseEvent.offsetX，MouseEvent.offsetY
MouseEvent.offsetX屬性返回鼠標(biāo)位置距離事件作用對象左側(cè)邊緣的水平距離电抚，
MouseEvent.offsetY屬性返回鼠標(biāo)位置距離事件作用對象左側(cè)邊緣的垂直距離惕稻，
這兩個(gè)屬性都是只讀屬性。
div.onclick=function(e){
e=e||window.event
console.log(e.offsetX,e.offsetY)
//鼠標(biāo)事件觸發(fā)時(shí),當(dāng)前鼠標(biāo)位置距離目標(biāo)節(jié)點(diǎn)左上角的距離
}
MouseEvent.pageX蝙叛，MouseEvent.pageY
MouseEvent.pageX屬性返回鼠標(biāo)位置距離文檔左側(cè)邊緣的距離俺祠，
MouseEvent.pageY屬性返回鼠標(biāo)位置距離文檔頂部的距離。
這兩個(gè)屬性都是只讀屬性借帘。
document.body.onclick=function(e){
e=e||window.event
console.log("pageY:"+e.pageY) //距離文檔頂部
console.log("clientY:"+e.clientY) //距離可視窗口頂部
}
MouseEvent.movementX蜘渣，MouseEvent.movementY(了解)
MouseEvent.movementX屬性返回上一個(gè)mousemove事件與當(dāng)前mousemove事件間的水平位移，
MouseEvent.movementY屬性返回上一個(gè)mousemove事件與當(dāng)前mousemove事件的垂直距離肺然。
這兩個(gè)屬性都是只讀屬性蔫缸。
e.screenX,e,screenY
距離屏幕的水平和垂直距離
鼠標(biāo)滾輪事件
滾輪事件在火狐瀏覽器中是DOMMouseScroll，而在其他瀏覽器中是onmousewheel狰挡。
向上下滾就保存到e.detail里面
火狐：e.detail 滴太哦
向上滾動(dòng)返回值為大于0
向下滾動(dòng)返回值為小于0
非火狐：e.wheelDelta 帶哦特
向上滾動(dòng)返回值為小于0
向下滾動(dòng)返回值為大于0
function wheelEvent(e){
e=e||window.event
if(e.detail){ //判斷是否支持e.detail 支持的話說明是火狐
if(e.detail<0){
console.log("向上滾動(dòng)")
}else{
console.log("向下滾動(dòng)")
}
}else{ //不支持,說明是其他瀏覽器
if(e.wheelDelta<0){
console.log("向下滾動(dòng)")
}else{
console.log("向上滾動(dòng)")
}
}
}
document.body.onmousewheel=wheelEvent
document.body.addEventListener("mousewheel",wheelEvent) //非火狐
document.body.addEventListener("DOMMouseScroll",wheelEvent) //火狐
