click:點擊鼠標左鍵或者按下回車鍵觸發。onclick事件處理程序也同樣可以通過這兩個方式執行。
dblclick:DOM3級事件。雙擊鼠標左鍵。
mousedown:單擊鼠標左鍵。
mouseup:松開單擊着的鼠標左鍵。
(click包括按下與松開鼠標左鍵兩個步驟,mousedown僅僅是按下鼠標左鍵操作,mouseout是松開鼠標左鍵操作。因此在鼠標操作上click=mousedown+mouseup)
mouseenter:鼠標光標從元素外部首次移動到元素范圍之內時觸發。該事件不冒泡,而且移動到后代元素上不觸發。DOM3級事件。(IE、Firefox、Opera)
mouseleave:位於元素上方的鼠標光標移動到元素范圍之外的時候觸發。該事件不冒泡。光標移動到后代元素不觸發。DOM3級事件。(IE、Firefox、Opera)
mousemove:鼠標在元素內部移動時重復地觸發(大概可以做鼠標的炫彩效果)
mouseout:鼠標從一個元素移動到另一個元素時觸發,該元素可以是原元素的外部元素或子元素。
mouseover:鼠標在元素外部,首次進入元素時,觸碰到元素邊界后觸發。(和mouseenter差不多應該)
檢測是否支持click、mousedown、mouseup、mousemove、mouseout、mouseover:
var isSupported=document.implementation.hasFeature("MouseEvents","2.0");
檢測能否支持dblick、mouseenter、mouseleave:
var isSupported=document.implementation.hasFeature("MouseEvent","3.0");
1.客戶區坐標位置
這個位置信息保存在事件對象的clientX,clientY屬性中。所有瀏覽器均支持這兩個屬性。(event.clientX,event.clientY)
2.頁面坐標位置
pageX,pageY屬性。在頁面沒有滾動的情況下他們的值與clientX、clientY的值相等。
與客戶區坐標位置的區別:
客戶區坐標位置是相對於視口,即瀏覽器顯示頁面的窗口的頂部與最左邊的距離。頁面坐標位置相對於頁面本身。頁面滾動會造成它們倆的數值不一致。
3.屏幕坐標位置
screenX、screenY屬性用於確定相對於整個電腦屏幕的距離。event.screenX,event.screenY。
4.修改鍵
修改鍵分別為:Shift、Ctrl、Alt、Meta(windows鍵盤中是windows鍵,MacOs中是Cmd鍵)。
分別對應:shiftKey、ctrlKey、altKey、metaKey四個屬性。它們的值是布爾值,如果鼠標與這幾個鍵的其中之一被一同按下,那么這些屬性返回true值。
5.相關元素
mouseover事件發生時,事件的目標元素是獲得光標的元素,但是有獲得就有失去,此時的相關元素就是失去光標的元素。
mouseout事件發生時,事件的目標元素時失去光標的元素,此時的相關元素是獲得光標的元素。
event.relatedTarget提供相關元素的信息。(有兼容性的問題,IE8及之前的版本不支持relatedTarget屬性)
6.鼠標按鈕
mousedown與mouseup事件中,其event事件存在一個button屬性,其值有:“0”,“1”,“2”。0代表按下了主鼠標,1代表按下了中間鼠標,2代表按下了次級鼠標。默認情況下主鼠標是左鼠標,次級鼠標是右鼠標。
(IE8及其之前的版本也提供了button屬性,但區別很大,使用時要特別注意兼容性)。
7.更多的事件信息
event.detail
其中包含有一個數值,表示在給定位置上發生了多少次單擊。從1開始計數。在此期間每觸發一對mousedown與mouseup事件就加一,但是在mousedown與mouseup事件之間移動了鼠標位置的話,detail屬性會被重置為0.
8.滾輪事件
mousewheel事件:event.wheelDelta
DOMMouseScroll事件:event.detail
見事件——鼠標滾輪事件。
9.觸摸設備
ios與Android設備不支持鼠標。
不支持dblclick事件。雙擊瀏覽器會放大。
輕擊可單擊元素會觸發mouseover事件。如果導致頁面變化就不會有其他事件發生,但是如果沒有導致頁面變化,依次觸發mousedown、mouseup、click事件。
輕擊不可單擊元素不會觸發任何事件。可單擊元素指的是可產生默認操作的元素,例如鏈接,或者那些已經被指定了onclick事件處理程序的元素。