淺談Javascript鼠標和滾輪事件

2024-05-06 14:21:43

字體：大中小

來源：轉載

供稿：網友

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的交互情況。

上一篇：javascript學習筆記(六) Date 日期類型

下一篇：基于jQuery的遍歷同id元素并響應事件的代碼