滾輪事件其實就是一個mousewheel事件，這個事件跟蹤鼠標滾輪，類似Mac的觸屏版。
一、客戶區坐標位置
鼠標事件都是在瀏覽器視口的特定位置上發生的。這個位置信息保存在事件對象的clientX和clientY屬性中。所有瀏覽器都支持者兩個屬性。clientX和clientY表示事件發生時鼠標指針在視口中的水平和垂直坐標。
document.addEventListener('click',function(event){
document.title=event.clientX+' , '+event.clientY;
},false);
給document指定了onclick事件處理程序，單擊頁面時在title中可以看到客戶端的坐標信息。
注意：這些值中不包括頁面滾動的距離，因為這個位置並不表示鼠標在頁面上的位置。
二、頁面坐標位置
通過clientX和clientY能夠指定鼠標是在視口中聲明位置發生的，而頁面坐標通過事件對象的pageX和pageY屬性，能夠得到事件是在頁面中的什么位置發生的。即pageX和pageY表示鼠標光標在頁面中的位置，因此坐標是從頁面本身而非視口的左邊和頂邊計算的。
document.addEventListener('click',function(event){
console.log(event.clientX+' , '+event.clientY);
console.log(event.pageX+' , '+event.pageY);
},false);
在頁面沒有滾動的情況下，pageX和pageY的值與clientX和clientY的值相等。
IE8及更早版本不支持事件對象上的頁面坐標，不過使用客戶區坐標和滾動信息可以計算出來。這時候需要用到document.body(混雜模式)或document.documentElement（標准模式）中的scrollLeft和scrollTop屬性。如下：
<script type="text/javascript"> var div=document.getElementById("myDiv"); EventUtil.addHandler(div,"click",function(event){ event=EventUtil.getEvent(event); var pageX=event.pageX, pageY=event.pageY; if(pageX==undefined) { pageX=event.clientX+(document.body.scrollLeft || document.documentElement.scrollLeft); } if(pageY==undefined){ pageY=event.clientY+(document.body.scrollTop || document.documentElement.scrollTop); } alert("Page coordinates:" +pageX+" , "+pageY); }); </script>
三、屏幕坐標位置
鼠標事件發生時，不僅會有相對於瀏覽器窗口的位置，還有一個相對於整個電腦屏幕的位置。而通過screenX和screenY屬性就可以確定鼠標事件發生時鼠標指針相對於整個屏幕的坐標信息。
document.addEventListener('click',function(event){
console.log("Client coordinates"+event.clientX+' , '+event.clientY);
console.log("Page coordinates "+event.pageX+' , '+event.pageY);
console.log("Screen coordinates "+event.screenX+' , '+event.screenY);
},false);
四、修改鍵
雖然鼠標事件主要是使用鼠標來觸發的，但在按下鼠標時鍵盤上的某些鍵的狀態也可以影響到所要采取的操作。這些修改鍵就是Shift、Ctrl、Alt和Meta(在Windows鍵盤中是Windows鍵，在蘋果機中是Cmd鍵) ，它們通常被用來修改鼠標事件的行為。
DOM為此規定了4個屬性，表示這些修改鍵的狀態：shiftKey,ctrlKey,altKey和metaKey。這些屬性中包含的都是布爾值，如果相應的鍵被按下了，則值為true，否則值為false。當某個鼠標事件發生時，通過檢測這幾個屬性就可以確定用戶是否同時按下了其中的鍵。如下：
<script type="text/javascript"> var div=document.getElementById("myDiv"); EventUtil.addHandler(div,"click",function(event){ event=EventUtil.getEvent(event); var keys=new Array(); if(event.shiftKey){ keys.push("shift");; } if(event.ctrlKey){ keys.push("ctrl"); } if(event.altKey){ keys.push("alt"); } if(event.metaKey){ keys.push("meta"); } alert("Keys: "+keys.join(",")); }); </script>
通過一個onclick事件處理程序檢測了不同修改鍵的狀態。數組keys中包含着被按下的修改鍵的名稱。也就是說，如果有屬性值為true，就會將對應修改鍵的名稱添加到keys數組中。在事件處理程序的最后，有一個警告框將檢測到的鍵的信息顯示給用戶。
Note:IE8及之前的版本不支持metaKey屬性，IE9、Firefox、Safari、Chrome和Opera都支持這4個鍵。
五、相關元素
在發生mouseover和mouseout事件時，還會涉及更多的元素。這兩個事件都會涉及把鼠標指針從一個元素的邊界之內移動到另一個元素的邊界之內。
對mouseover事件而言，事件的主目標是獲得光標的元素，而相關元素就是那個失去光標的元素。
類似地，對mouseout事件而言，事件的主目標是失去光標的元素，而相關元素是獲得光標的元素。
DOM通過event對象的relatedTarget屬性獲得相關元素的信息。relatedTarget屬性只對mouseover和mouseout事件才包含值；對於其他事件，這個屬性值是null。
IE8及之前版本不支持relatedTarget屬性，但提供了保存着相同信息的不同屬性。
在mouseover事件觸發時，IE的fromElement屬性中保存了相關元素；
在mouseout事件觸發時，IE的toElement屬性保存了相關元素；（IE9支持relatedTarget，fromElement,toElement都支持）
例子：
<div id="myDiv" style="background-color: red;height: 100px;width: 100px;"></div>
var div=document.getElementById("myDiv"); EventUtil.addHandler(div,"mouseout",function(event){ event=EventUtil.getEvent(event); var target=EventUtil.getTarget(event); var relatedTarget=EventUtil.getRelatedTarget(event); alert("Moused out of "+target.nodeName+" to "+relatedTarget.tagName); });
六、鼠標按鈕
對於mousedown和mouseup事件，在event對象中存在一個button屬性，表示按下或釋放的按鈕。
DOM的button屬性有3個取值：
- 0：表示主鼠標按鈕(鼠標左鍵)
- 1：表示中間的鼠標按鈕（鼠標滾輪按鈕）
- 2：表示次鼠標按鈕（鼠標右鍵）
IE8及之前版本也提供了button屬性，但這個屬性的值與DOM的button屬性有很大差異。
- 0：表示沒有按按鈕。——》0
- 1：表示按下了鼠標左鍵——》0
- 2：表示按下了鼠標右鍵——》2
- 3：表示同時按下了鼠標左右鍵——》0
- 4：表示按下了中間的鼠標按鈕——》1
- 5：表示同時按下了鼠標左鍵和中間的鼠標按鈕——》0
- 6：表示同時按下了鼠標右鍵和中間的鼠標按鈕——》2
- 7：表示同時按下了三個鼠標按鈕——》》DOM0
DOM模型下的button屬性比IE模型下的button屬性更簡單實用，因為同時按下多個鼠標按鈕的情形十分罕見。
最常見的的做法就是將IE模型規范化為DOM方式，畢竟除IE8及更早版本之外都支持DOM模型。
將IE中其他選項分別轉換成如同按下這三個按鍵中的一個即可（同時將主按鈕作為優先選取的對象）。
IE中返回的5和7會被轉換成DOM模型中的0。
重點：由於單獨使用能力檢測無法確定差異（兩種模型有同名的button屬性） ，因此必須另辟蹊徑。支持DOM版鼠標事件的瀏覽器可以通過hasFeature()方法來檢測，所以跨瀏覽器的getButton()方法如下：
getButton:function(event){
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.buton){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
}
document.implementation.hasFeature("MouseEvents","2.0"))通過檢測"MouseEvents"這個特性，就可以確定event對象中存在的button屬性中是否包含正確的值。
Note:在onmouseup事件處理程序時，button值表示釋放的是哪個按鈕。此外，如果不是按下或釋放了主鼠標按鈕，Opera不會觸發mouseup或mousedown事件。
七、更多的事件信息
“DOM2級事件”規范在event對象中還提供了detail屬性，用於給出有關事件的更多信息。對於鼠標事件來說，detail中包含了一個數值，表示在給定位置上發生了多少次單擊。
在同一個像素上相繼地發生一次mousedown和一次mouseup事件算作一次單擊。detail屬性從1開始計數，每次單擊遞增。如果鼠標在mousedown和mouseup之間移動了位置，則detail會被重置為0。
八、鼠標滾輪事件
當用戶通過是不滾輪與頁面交互，在垂直方向上滾動頁面時（無論向上還是向下），就會觸發mousewheel事件。由於mousewheel事件非常流行，而且所有瀏覽器都支持它，所以HTML5也加入了mousewheel事件。
mousewheel事件可以在任何元素上面觸發，最終會冒泡到document(IE8)或者window(IE9，Opera,Chrome及Safari)對象。
相關屬性：除了鼠標事件的所有標准信息外，mousewheel事件對應的event對象還包含一特殊的wheelDelta屬性。
當用戶向前滾動鼠標滾輪時，wheelDelta是120的倍數；當用戶向后滾動鼠標滾輪時，wheelDelta是-120的倍數。
多數情況，只需要知道鼠標滾輪滾動的方向即可，這通過wheelDelta的正負號實現。
兼容性：
Opera 9.5之前的版本，wheelDelta值的正負號是顛倒的。
Firefox支持一個DOMMouseScroll的類似事件，也是在鼠標滾輪輪滾動時觸發。鼠標有關信息保存在detail屬性中。當向前滾動鼠標滾輪時，這個屬性的值是-3的倍數，向后滾動鼠標滾輪時，這個值是3的倍數。
以下為兼容性處理。
getWheelDelta:function(event){ if(event.wheelDelta){ return(client.engine.opera && client.engine.opera<9.5? -event.wheelDelta:event.wheelDelta); }else{ return -event.detail*40; } }
九、觸摸設備
iPhone和iPad沒有鼠標。
- 不支持dblclick事件。雙擊瀏覽器窗口會放大畫面，而且沒有辦法改變該行為。
- 輕擊可單擊元素會觸發mousemove事件。如果此操作會導致內容變化，將不再有其他事件發生；如果屏幕沒有因此變化，那么會依次觸發mousedown，mouseup和click事件。輕擊不可單擊元素不會觸發任何事件。可單擊的元素是指那些可以單擊產生默認操作的元素（如鏈接），或者那些已經被指定了onclik事件處理程序的元素。
- mousemove事件也會觸發mouseover和mouseout事件。
- 兩個手指放在屏幕上且頁面隨手指移動而滾動時會觸發mousewheel和scroll事件。
擴展閱讀：
javaScript事件（四）event的公共成員（屬性和方法）
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/6552734.html有問題歡迎與我討論，共同進步。