click：單擊事件。
dblclick：雙擊事件。
mousedown：按下鼠標(biāo)鍵時(shí)觸發(fā)。
mouseup：釋放按下的鼠標(biāo)鍵時(shí)觸發(fā)。
mousemove：鼠標(biāo)移動事件。
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)部移動，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 滴太哦
向上滾動返回值為大于0
向下滾動返回值為小于0
非火狐：e.wheelDelta 帶哦特
向上滾動返回值為小于0
向下滾動返回值為大于0

        function wheelEvent(e){
            e=e||window.event
            if(e.detail){   //判斷是否支持e.detail    支持的話說明是火狐
                if(e.detail<0){
                    console.log("向上滾動")
                }else{
                    console.log("向下滾動")
                }
            }else{          //不支持,說明是其他瀏覽器
                if(e.wheelDelta<0){
                    console.log("向下滾動")
                }else{
                    console.log("向上滾動")
                }
            }
        }
        
document.body.onmousewheel=wheelEvent                           
document.body.addEventListener("mousewheel",wheelEvent)         //非火狐
document.body.addEventListener("DOMMouseScroll",wheelEvent)     //火狐