1. 鼠標事件

在DOM3級事件中定義了9個鼠標事件：

• click：在用戶單擊主鼠標按鈕（一般是左邊的按鈕）或按下回車鍵時觸發(fā)
• dbclick：在用戶雙擊主鼠標按鈕時觸發(fā)
• mousedown：在用戶按下了任意鼠標按鈕時觸發(fā)
• mouseenter：在護鏢光標從元素外部首次移動到元素范圍之內(nèi)時觸發(fā)，這個事件不冒泡，而且在鼠標移動到后代元素上也不會觸發(fā)
• mouseleave：在位于元素上方的鼠標光標移動到元素范圍之外時觸發(fā)。這個事件不冒泡，而且在鼠標移動到后代元素上也不會觸發(fā)
• mousemove：當鼠標指針在元素內(nèi)部移動時重復(fù)地觸發(fā)
• mouseout：在鼠標指針位于一個元素上方，然后用戶將其移動到另一個元素時觸發(fā)
• mouseover：在鼠標指針位于一個元素外部，然后用戶將其首次移入另一個元素邊界之內(nèi)時觸發(fā)
• mouseup：在用戶釋放鼠標按鈕時觸發(fā)

觸發(fā)一個click事件會依次先后觸發(fā)：

• mousedown
• mouseup
• click

鼠標事件對象中保存著鼠標相對于視口、頁面和屏幕的坐標位置信息，通過這些信息可以精確地對鼠標事件進行控制。

• clientX、clientY：鼠標事件發(fā)生時鼠標指針在視口（可以看見的區(qū)域）中的水平坐標和垂直坐標
• pageX、pageY：鼠標事件發(fā)生時鼠標指針相對于整個頁面的位置坐標
• screenX、screenY：鼠標事件發(fā)生時鼠標指針相對于整個屏幕的坐標信息

IE8及之前版本不支持事件對象上頁面坐標，但可以通過視口坐標和滾動信息計算出來。

var pageX = event.pageX, pageY = event.pageY;
if(pageX === undefined) {
    pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if(pageY === undefined) {
    pageXY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
}

mousedown和mouseup事件的event對象中存在著一個button屬性，表示按下或釋放的按鈕。DOM的button屬性有3個值：

• 0：表示主鼠標按鈕（鼠標左鍵）
• 1：表示中間的鼠標按鈕（鼠標滾輪）
• 2：次鼠標按鈕（鼠標右鍵）

而IE8及之前版本中button屬性與DOM的button屬性有很大差異：

• 0：沒有按下按鈕
• 1：按下主鼠標按鈕
• 2：按下次鼠標按鈕
• 3：同時按下主、次鼠標按鈕
• 4：按下中間按鈕
• 5：同時按下主鼠標按鈕和中間按鈕
• 6：同時按下次鼠標按鈕和中間按鈕
• 7：同時按下三個按鈕

可以通過瀏覽器的hasFeature()方法來兼容IE和DOM：

var EventUtil = {
    getButton: function(event) {
        if(document.implementation.hasFeature("MouseEvents", "2.0") {
            return event.button;
        } else {
            switch(event.button) {
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4:
                    return 1;
            }
        }
    }
}

2. 鼠標滾輪事件 mousewheel

mousewheel事件對應(yīng)的event對象中除包含鼠標事件的所有標準信息外，還包含一個特殊的wheelDelta屬性。當用戶向前滾動鼠標滾輪時，wheelDelta是120的倍數(shù)；當鼠標滾輪向后滾動是，wheelDelta是-120的倍數(shù)。對于Opera9.5之前的版本中，wheelDelta值的正負號是相反的。Firefox支持一個名為DOMMouseScroll的事件，也是在鼠標滾輪滾動是觸發(fā)，而且該事件會冒泡到window對象中，而有關(guān)鼠標滾動信息保存在detail屬性中，當鼠標滾輪向前滾動時，這個屬性值是-3的倍數(shù)，向后滾動時是3的倍數(shù)。
跨瀏覽器環(huán)境下的解決方案：

if(event.wheelDelta) {
    return event.wheelDelta;
} else {
    return -event.detail*40;  //Firefox
}