淺談Javascript滑鼠和滾輪事件

a）滑鼠事件　　

　　滑鼠事件也許是web頁面當中最常用到的事件，因為滑鼠是最常用的導航裝置，在DOM3級事件上定義了9個滑鼠事件，分別為：

　　click：當使用者點擊滑鼠主鍵通常是指滑鼠左鍵或按斷行符號鍵時觸發。

　　dbclick：當使用者雙擊滑鼠主鍵時發生觸發，這個事件並沒有在DOM2級事件中定義但是卻被普遍支援了，後來在DOM3級中得到了標準化。

　　mousedown：當使用者按下滑鼠任意一個鍵都會觸發，這個事件是不能夠通過鍵盤觸發的。

　　mouseenter：當滑鼠圖示從元素外移動至元素邊界內時觸發。該事件不支援冒泡，而且當滑鼠在元素的上表面移動時負觸發此事件。該事件不屬於DOM2級事件，屬於DOM3級後添加的事件，IE 、FF9+、以及opera支援此事件。

　　mouseleave：當滑鼠處於元素上方，之後移出元素邊界是觸發該事件，與mouseenter事件相同，不支援冒泡，在元素上方是不觸發，該事件不屬於DOM2級事件，屬於DOM3級後添加的事件，IE 、FF9+、以及opera支援此事件。

　　mousemove：當滑鼠在某元素周圍移動時重複觸發，該事件不能通過鍵盤事件觸發。

　　mouseout：當滑鼠處於某一元素上方，之後移動到其他元素上方時觸發。元素移動到原始元素的邊界外，或者原始元素的子項目上，這個事件不能通過鍵盤觸發。

　　mouseover：當使用者將滑鼠第一次從某元素邊界外移動到該元素邊界內時觸發，這個事件不能夠通過鍵盤觸發。

　　mouseup：當使用者釋放滑鼠按鍵是觸發，這個事件不能夠通過鍵盤觸發。

　　頁面上的所有元素都支援滑鼠事件，除了mouseenter和mouseleave外，所有的事件都冒泡，並且他們的預設行為是可以被取消掉的。但取消滑鼠事件的預設行為可能會影響到其他事件，因為有些滑鼠事件是相互依賴的。

　　只有當一個mousedown事件和一個mouseup事件在同一個元素上觸發，才能觸發滑鼠的click事件；假設任何一個事件被取消，click事件將永遠不會被觸發。相似的原理dbclick事件依賴於click事件，如果連續兩次click事件中任意一次被取消，dbclick都不會被觸發。常用的滑鼠事件如下:

　　1.mousedown、2.mouseup、3.click、4.mousedown、5.mouseup、6.click、7.dbclick。

　　無論是click 還是 dbclick事件，都依賴於其他事件的觸發。

　　你可以通過下面的代碼來確定瀏覽器是否在dom2事件上支援滑鼠事件，

　　var isSupport = document.implementation.hasFeature('MouseEvents'，'2.0')；

　　然而值得注意的是在dom3級事件上檢測則有些不同：

　　var isSupport = document.implementation.hasFeature('MouseEvent','3.0');

　　在滑鼠事件上還包含一個子類事件，即wheel事件（滾輪事件）。在wheel事件中只包含一個事件，mousewheel事件，他反應滑鼠滾輪或其他裝置，如mac的touchpad的互動情況。

b）關聯元素

　　對於mouseover和mouseout事件來說，還存在著與事件相關的元素，這連個事件所執行的動作包括，移動滑鼠從一個元素邊界內部到另一個元素邊界內部。以mouseover事件為例，他的主要目標元素是滑鼠將要移至的元素，而那個關聯元素就是失去滑鼠的那個元素。同樣對於mouseout事件，主要目標是那個滑鼠移出的元素,而關聯元素則是獲得滑鼠的元素，DOM通過event對象上的relatedTarget屬性來提供關聯元素的資訊，IE8或更早版本的IE不支援relatedTarge屬性，但卻提供了與其功能相類似的fromElement屬性和toElement屬性。在IE下，當mousemove事件觸發時，event對象的fromElement包含著關聯元素，當mouseout事件觸發時，event的toElement屬性包含著關聯元素。在IE9中支援所有的屬性，一個跨瀏覽器的getRelatedTarget方法可以這樣寫： 複製代碼 代碼如下:var eventUtil = {
getRelateTarget:function(event){
if (event.relatedTarget) {
return event.relatedTarget;
}else if(event.fromElement){
return event.fromElement;
}else if(event.toElement){
return event.toElement;
}else {
return null;
}
}
};

c)buttons

　　click事件只有當滑鼠主鍵點擊了某一元素的時候才會觸發（或者當某一元素獲得焦點時按下斷行符號鍵），對於mousedown和mouseup來說，在事件對象event上存在一個屬性button，他可以確定是哪個鍵按下或者釋放。在DOM實現的button屬性值通常有三種可能：

　　0：代表主鍵，

　　1：代表滾輪，

　　2：代表副鍵。

　　在一般情況下主鍵指的是滑鼠的左鍵，副鍵代表滑鼠右鍵。

　　從IE8開始也提供了button屬性，但卻有著完全不同的取值範圍：　

　　0 ：沒有按鍵按下，

　　1 ：主鍵已經被按下，

　　2 ：代表副鍵已經被按下，

　　3 ：主鍵副鍵都被按下，

　　4 ：代表中間鍵被按下，

　　5 ：代表主鍵和中介軟體被按下，

　　6 ：代表副鍵和中間鍵被按下，

　　7 ：代表三個鍵都被按下。

　　可見DOM 模型下的button屬性的取值範圍比IE模型下的取值範圍要簡單的多，而且個人覺得ie下的操作情況略顯變態。

d)其他事件資訊

　　在DOM2級事件上，為事件對象event還提供了detail屬性來提供更多的事件資訊，例如對於點擊事件來說，detail可以記錄同一像素位置的點擊次數，detail的值是從1開始計數的，每次點擊後加一，如果在mousedown和mouseup之間，滑鼠發生移動，這個值將會被清零。

關於滑鼠事件就先寫這些，日後在慢慢補全。