先看看都有哪些鼠標事件：mousedown,mouseup_and_click,dblclick,mousemove和mouseover mouseout。然后還會解釋一下relatedTarget,fromElement和toElement這些事件屬性。最后是微軟的mouseenter和mouseleave事件。

瀏覽器的兼容性問題，可以在瀏覽器兼容性列表查看。

例子
這里有一個例子。可以幫助理解下面的內容。
mousedown，mouseup，click和dblclick在這個鏈接上注冊?？梢栽傧旅娴奈谋究蚶锩娌榭??；蛘咴趯υ捒蚶锩?。（請在原文里嘗試：http://www.quirksmode.org/js/events_mouse.htm）
Mousedown,mouseup,click
如果用戶在一個元素上點擊，那么最少三個事件會被觸發(fā)，順序是這樣的：
1、mousedown,當用戶在這個元素上按下鼠標鍵的時候
2、mouseup，當用戶在這個元素上松開鼠標鍵的時候
3、click，當一個mousedown和一個mouseup都在這個元素上被檢測到的時候發(fā)生
通常mousedown和mouseup比click有用。有些瀏覽器不允許你讀取onclick的事件信息。而且有時候用戶用鼠標做出某些動作click事件沒有跟上。
假設用戶在一個鏈接上按下了鼠標鍵，然后把鼠標挪開了并且挪開后松開了鼠標鍵。那么這時候這個鏈接就僅僅發(fā)生了mousedown事件。類似的，用戶在點擊鼠標之后挪到了鏈接上，那么鏈接就僅有mouseup發(fā)生。這兩種情況都沒有click事件發(fā)生。
這是不是一個問題取決于用戶的行為。但是你應該注冊onmousedown/up事件，除非你就是完全想click發(fā)生。
如果你用了彈出警示框的話，瀏覽器可能會丟失事件發(fā)生的軌跡和發(fā)生了多少次，會引起混亂。所以最好別用那個。
Dblclick
dblclick事件很少用。如果你要用的話一定不要把onclick和dblclick的事件處理程序注冊在一個HTML元素上。如果兩個都注冊了的話你要知道用戶到底干什么是一件基本上不可能的事情。
總之，當用戶在一個元素上雙擊的時候click事件總是發(fā)生在dblclick之前。另外，在Netscape中，第二個click總是會在dblclick之前被分開處理。不管怎樣，警示框在這是很危險的。
所以保證你的click和dblclick很好的分離能避免很多復雜的事情。
Mousemove
mousemove事件運行的很好，但是需要注意的是那可能需要很多的系統(tǒng)資源來處理所有的mousemove事件。當用戶把鼠標移動一個像素，mousemove就觸發(fā)一次。就算什么都沒發(fā)生，長而復雜的函數(shù)也要耗費很長的時間會影響網(wǎng)站的效率：所有的事情都會變慢，尤其在那些老古董上。
所以最好的辦法就是當你需要的時候注冊onmousemove事件，在不用的時候盡快移除：

Mouseover和mouseout
再看看這個例子，換成mouserover然后試試。這個例子只是在ev3上添加了onmouseover的事件處理程序。然而你會注意到不僅僅在ev3上會觸發(fā)事件在ev4或者span上都會觸發(fā)。在Mozilla 1.3之前，當鼠標進入一個文本區(qū)域的時候都會觸發(fā)。
原因當然就是事件冒泡。用戶在ev4上觸發(fā)了mouseover事件。在這個元素上沒有onmouseover事件處理程序，但是在ev3上有。所以當事件冒泡到ev3上的時候，程序就執(zhí)行了。
現(xiàn)在這樣的設置雖然都完全正確，但是還有一個問題。首要問題就是目標。假設鼠標進入了ev4：
-----------------------------------------
| This is div id="ev3" |
| ----------------------------- |
| | This is div id="ev4" | |
| | -------- <-------- |
| | | span | | |

| | -------- | |
| ----------------------------- |
-----------------------------------------
<--------: mouse movement
現(xiàn)在這個事件的target/srcElement就是ev4：就是事件發(fā)生的元素，因為鼠標移動到了他上面。但是當下面的發(fā)生時候：
-----------------------------------------
| This is div id="ev3" |
| ----------------------------- |
| | This is div id="ev4" | |
| | -------- | |
| | | span | | |
| | | --------> | |
| | -------- | |
| ----------------------------- |
-----------------------------------------
-------->: mouse movement
這個事件的target/srcElement是一樣的。在這一樣還是鼠標進入ev4。然而你可能會當鼠標從ev3來或者從SPAN來的時候做不同的事。所以我們需要知道鼠標到底從哪來的。
relatedTarget,fromElement,toElement
W3C把relatedTarget屬性加進了mouseover和mouseout事件中。在mouseover事件下就是包括鼠標從哪來，在mouseout下就是包括鼠標到哪去。
微軟也有包含以下信息的兩個屬性：
1、fromElement指的是鼠標來之前的元素。在mouseover的狀況下比較有用
2、toElement表示鼠標將要去的那個元素。在mouseout的情況下比較有用。
在我們的第一個例子里面，relatedTarget/fromElement包含一個ev3的引用，在我們的第二個例子是SPAN。現(xiàn)在你就知道鼠標的來源了。
跨瀏覽器的代碼
所以如果你想在mouseover的情況下想知道鼠標從哪來，那么：

如果在mouseout的情況下想知道鼠標的去向那么：

鼠標離開一個層
在一個基于層的導航菜單里面你可能需要知道鼠標什么時候離開層這樣你才能把那個層關閉。所以你給這個層的onmouseout注冊了一個事件處理程序。然后事件冒泡會導致當鼠標離開任意一個層的時候都會觸發(fā)這個onmouseout。
--------------
| Layer |.onmouseout = doSomething;
| -------- |
| | Link | ----> We want to know about this mouseout

| -------- |
| -------- |
| | Link | |
| | ----> | but not about this one
| -------- |
--------------
---->: mouse movement
另外的一個停止的方法是當你把鼠標移入這個層，然后到了一個鏈接上，瀏覽器就在這個層上注冊一個mouseout事件。這個讓我很不明白（鼠標依然在層里），但是所有的瀏覽器都沒問題。
那么我們如何在鼠標真正離開的層的時候讓mouseout發(fā)生呢？

首先得到事件的target，也就是鼠標離開的元素。如果target不是DIV（層），理解結束函數(shù)，因為鼠標沒有真正離開層。
如果target是層，我們不能確定鼠標時離開層了還是進入了層里面的一個鏈接。所以要再檢查事件的relatedTarget/toElement，也就是鼠標移向的那個元素。
我們讀取這個元素，然后我們通過DOM樹向上遍歷，直到事件的target（也就是DIV），或者BODY元素。
如果我們遇到的target是層的子元素，那么鼠標就沒有離開層。就停止函數(shù)的運行。
當函數(shù)通過所有的驗證我們就能確定鼠標確實離開了層，我們就能開始應該的動作了（通常是隱藏這個層）。

Mouseenter和mouseleave
微軟還有個解決辦法。他添加了兩個新的事件mouseenter和mouseleave。除了對事件冒泡不反應以外基本上和mouseover和mouseout是一樣的。他們把注冊了事件的元素看成一個整塊，對于發(fā)生在塊內的
mouseover和mouseout不做反應。
所以這兩個事件也解決了我們的問題：他們只對綁定的元素做出mouseover/out反應。
現(xiàn)在這兩個事件只被版本在5.5以上的IE支持?；蛟S其他瀏覽器哪天回借鑒下。
結尾
現(xiàn)在已經(jīng)到了Event的介紹的尾聲了。好運！
原文地址：http://www.quirksmode.org/js/events_mouse.html
我的Twitter:@rehawk

最新評論