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

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

1. click

點(diǎn)擊事件，只有左鍵生效

2. dblclick

雙擊事件，只有左鍵生效

跟click事件對比，看下輸出

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

3.contextmenu

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

4.mousedown

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

5.mouseup

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

跟click事件對比，看下輸出

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

mousedown > mouseup > click

跟dblclick事件對比，看下輸出

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

mousedown > mouseup > click > dblclick

跟contextmenu事件對比，看下輸出

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

mousedown > mouseup > contextmenu

6.mouseenter

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

7.mouseleave

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

8.mouseover

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

9.mouseout

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

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

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

mouseover > mouseenter > mouseout > mouseleave

10.mousemove

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

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

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

總結(jié)

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

最新評論