有時間整理下鼠標(biāo)的監(jiān)聽事件，目前匯總到的鼠標(biāo)監(jiān)聽事件以下10個：

先說下觸發(fā)時機和作用鍵（左鍵、右鍵）

1. click

點擊事件，只有左鍵生效

2. dblclick

雙擊事件，只有左鍵生效

跟click事件對比，看下輸出

先執(zhí)行了兩次的click事件，再執(zhí)行了dblclick事件，所以click事件的優(yōu)先級高于dblclick，這個不難理解

3.contextmenu

右鍵點擊事件，打開上下文菜單時觸發(fā)，這個我開發(fā)過程中沒用用到過，放一下效果圖（edge瀏覽器，打開的上下文菜單） 

4.mousedown

鼠標(biāo)按鈕按下時觸發(fā)，注意觸發(fā)時機，左右鍵都可以監(jiān)聽

5.mouseup

鼠標(biāo)按鈕松開時觸發(fā)，與mousedown對于，左右鍵都可以同時監(jiān)聽

跟click事件對比，看下輸出

輸出先是監(jiān)聽到mousedown，再次時mouseup，最后輸出的時click，記錄了一次完整的點擊過程，也很好理解

mousedown > mouseup > click

跟dblclick事件對比，看下輸出

 兩組記錄click點擊過程后，完成dblclick監(jiān)聽

mousedown > mouseup > click > dblclick

跟contextmenu事件對比，看下輸出

跟click一致，記錄了完整的點擊操作，介紹這個主要是說明，mousedown和mouseup都是可以監(jiān)聽鼠標(biāo)右鍵的

mousedown > mouseup > contextmenu

6.mouseenter

移入事件，鼠標(biāo)指針移動到元素時觸發(fā)

7.mouseleave

移除事件，鼠標(biāo)指針移除元素時觸發(fā)

8.mouseover

鼠標(biāo)移動到某個元素上觸發(fā)

9.mouseout

鼠標(biāo)從某個元素上移開觸發(fā)

上述四個事件，感覺很相似，enter和over，leave和out，把這四個屬性放一起我們看下輸出的先后順序

 可以看出，移入過程中，先是輸出的mouseover，移出過程輸出的時mouseout，也就是mouseover和mouseout的優(yōu)先級高于mouseenter和mouseleave，注意觸發(fā)時機

mouseover > mouseenter > mouseout > mouseleave

10.mousemove

 鼠標(biāo)移動時觸發(fā)

這個就很好理解了，只要鼠標(biāo)在某個元素是移動就會被監(jiān)聽到

 小結(jié)一下，簡答做個記錄，主要是長得像雙胞胎的mouseover、mouseenter，mouseout， mouseleave的四個屬性著重注意，其他都不難理解。下一篇有機會寫一下輸入框的焦點事件與點擊事件的優(yōu)先級

總結(jié)

到此這篇關(guān)于JavaScript鼠標(biāo)事件監(jiān)聽、觸發(fā)時機和觸發(fā)順序的文章就介紹到這了,更多相關(guān)JS鼠標(biāo)事件監(jiān)聽、觸發(fā)時機和順序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論