鼠標(biāo)事件　　

鼠標(biāo)事件也許是 web 頁(yè)面當(dāng)中最常用到的事件，因?yàn)槭髽?biāo)是最常用的導(dǎo)航設(shè)備，在 DOM3 級(jí)事件上定義了 9 個(gè)鼠標(biāo)事件，分別為：

• click：當(dāng)用戶(hù)點(diǎn)擊鼠標(biāo)主鍵通常是指鼠標(biāo)左鍵或按回車(chē)鍵時(shí)觸發(fā)。

• dbclick：當(dāng)用戶(hù)雙擊鼠標(biāo)主鍵時(shí)發(fā)生觸發(fā)，這個(gè)事件并沒(méi)有在 DOM2 級(jí)事件中定義但是卻被普遍支持了，后來(lái)在 DOM3 級(jí)中得到了標(biāo)準(zhǔn)化。

• mousedown：當(dāng)用戶(hù)按下鼠標(biāo)任意一個(gè)鍵都會(huì)觸發(fā)，這個(gè)事件是不能夠通過(guò)鍵盤(pán)觸發(fā)的。

• mouseenter：當(dāng)鼠標(biāo)圖標(biāo)從元素外移動(dòng)至元素邊界內(nèi)時(shí)觸發(fā)。該事件不支持冒泡，而且當(dāng)鼠標(biāo)在元素的上表面移動(dòng)時(shí)負(fù)觸發(fā)此事件。該事件不屬于 DOM2 級(jí)事件，屬于 DOM3 級(jí)后添加的事件，IE 、FF9+、以及 opera 支持此事件。

• mouseleave：當(dāng)鼠標(biāo)處于元素上方，之后移出元素邊界是觸發(fā)該事件，與 mouseenter 事件相同，不支持冒泡，在元素上方是不觸發(fā)，該事件不屬于 DOM2 級(jí)事件，屬于 DOM3 級(jí)后添加的事件，IE 、FF9+、以及 opera 支持此事件。

• mousemove：當(dāng)鼠標(biāo)在某元素周?chē)苿?dòng)時(shí)重復(fù)觸發(fā)，該事件不能通過(guò)鍵盤(pán)事件觸發(fā)。

• mouseout：當(dāng)鼠標(biāo)處于某一元素上方，之后移動(dòng)到其他元素上方時(shí)觸發(fā)。元素移動(dòng)到原始元素的邊界外，或者原始元素的子元素上，這個(gè)事件不能通過(guò)鍵盤(pán)觸發(fā)。

• mouseover：當(dāng)用戶(hù)將鼠標(biāo)第一次從某元素邊界外移動(dòng)到該元素邊界內(nèi)時(shí)觸發(fā)，這個(gè)事件不能夠通過(guò)鍵盤(pán)觸發(fā)。

• mouseup：當(dāng)用戶(hù)釋放鼠標(biāo)按鍵是觸發(fā)，這個(gè)事件不能夠通過(guò)鍵盤(pán)觸發(fā)。

頁(yè)面上的所有元素都支持鼠標(biāo)事件，除了 mouseenter 和 mouseleave 外，所有的事件都冒泡，并且他們的默認(rèn)行為是可以被取消掉的。但取消鼠標(biāo)事件的默認(rèn)行為可能會(huì)影響到其他事件，因?yàn)橛行┦髽?biāo)事件是相互依賴(lài)的。

只有當(dāng)一個(gè) mousedown 事件和一個(gè) mouseup 事件在同一個(gè)元素上觸發(fā)，才能觸發(fā)鼠標(biāo)的 click 事件；假設(shè)任何一個(gè)事件被取消，click 事件將永遠(yuǎn)不會(huì)被觸發(fā)。相似的原理 dbclick 事件依賴(lài)于 click 事件，如果連續(xù)兩次 click 事件中任意一次被取消，dbclick 都不會(huì)被觸發(fā)。常用的鼠標(biāo)事件如下:

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

無(wú)論是 click 還是 dbclick 事件，都依賴(lài)于其他事件的觸發(fā)。

你可以通過(guò)下面的代碼來(lái)確定瀏覽器是否在 dom2 事件上支持鼠標(biāo)事件，

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

然而值得注意的是在 dom3 級(jí)事件上檢測(cè)則有些不同：

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

在鼠標(biāo)事件上還包含一個(gè)子類(lèi)事件，即 wheel 事件（滾輪事件）。在 wheel 事件中只包含一個(gè)事件，mousewheel 事件，他反應(yīng)鼠標(biāo)滾輪或其他裝置，如 mac 的 touchpad 的交互情況。

關(guān)聯(lián)元素

對(duì)于 mouseover 和 mouseout 事件來(lái)說(shuō)，還存在著與事件相關(guān)的元素，這連個(gè)事件所執(zhí)行的動(dòng)作包括，移動(dòng)鼠標(biāo)從一個(gè)元素邊界內(nèi)部到另一個(gè)元素邊界內(nèi)部。以 mouseover 事件為例，他的主要目標(biāo)元素是鼠標(biāo)將要移至的元素，而那個(gè)關(guān)聯(lián)元素就是失去鼠標(biāo)的那個(gè)元素。同樣對(duì)于 mouseout 事件，主要目標(biāo)是那個(gè)鼠標(biāo)移出的元素, 而關(guān)聯(lián)元素則是獲得鼠標(biāo)的元素，DOM 通過(guò) event 對(duì)象上的 relatedTarget 屬性來(lái)提供關(guān)聯(lián)元素的信息，IE8 或更早版本的 IE 不支持 relatedTarge 屬性，但卻提供了與其功能相類(lèi)似的 fromElement 屬性和 toElement 屬性。在 IE 下，當(dāng) mousemove 事件觸發(fā)時(shí)，event 對(duì)象的 fromElement 包含著關(guān)聯(lián)元素，當(dāng) mouseout 事件觸發(fā)時(shí)，event 的 toElement 屬性包含著關(guān)聯(lián)元素。在 IE9 中支持所有的屬性，一個(gè)跨瀏覽器的 getRelatedTarget 方法可以這樣寫(xiě)：

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;   
}   
}   
};  

buttons

click 事件只有當(dāng)鼠標(biāo)主鍵點(diǎn)擊了某一元素的時(shí)候才會(huì)觸發(fā)（或者當(dāng)某一元素獲得焦點(diǎn)時(shí)按下回車(chē)鍵），對(duì)于 mousedown 和 mouseup 來(lái)說(shuō)，在事件對(duì)象 event 上存在一個(gè)屬性 button，他可以確定是哪個(gè)鍵按下或者釋放。在 DOM 實(shí)現(xiàn)的 button 屬性值通常有三種可能：

0：代表主鍵，

1：代表滾輪，

2：代表副鍵。

在一般情況下主鍵指的是鼠標(biāo)的左鍵，副鍵代表鼠標(biāo)右鍵。

從 IE8 開(kāi)始也提供了 button 屬性，但卻有著完全不同的取值范圍：　

0 ：沒(méi)有按鍵按下，

1 ：主鍵已經(jīng)被按下，

2 ：代表副鍵已經(jīng)被按下，

3 ：主鍵副鍵都被按下，

4 ：代表中間鍵被按下，

5 ：代表主鍵和中間件被按下，

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

7 ：代表三個(gè)鍵都被按下。

可見(jiàn) DOM 模型下的 button 屬性的取值范圍比 IE 模型下的取值范圍要簡(jiǎn)單的多，而且個(gè)人覺(jué)得 IE 下的操作情況略顯變態(tài)。

其他事件信息

在 DOM2 級(jí)事件上，為事件對(duì)象 event 還提供了 detail 屬性來(lái)提供更多的事件信息，例如對(duì)于點(diǎn)擊事件來(lái)說(shuō)，detail 可以記錄同一像素位置的點(diǎn)擊次數(shù)，detail 的值是從 1 開(kāi)始計(jì)數(shù)的，每次點(diǎn)擊后加一，如果在 mousedown 和 mouseup 之間，鼠標(biāo)發(fā)生移動(dòng)，這個(gè)值將會(huì)被清零。