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

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

1. click

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

2. dblclick

雙擊事件，只有左鍵生效

跟click事件對(duì)比，看下輸出

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

3.contextmenu

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

4.mousedown

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

5.mouseup

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

跟click事件對(duì)比，看下輸出

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

mousedown > mouseup > click

跟dblclick事件對(duì)比，看下輸出

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

mousedown > mouseup > click > dblclick

跟contextmenu事件對(duì)比，看下輸出

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

mousedown > mouseup > contextmenu

6.mouseenter

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

7.mouseleave

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

8.mouseover

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

9.mouseout

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

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

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

mouseover > mouseenter > mouseout > mouseleave

10.mousemove

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

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

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

總結(jié)

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

最新評(píng)論