每日分享！JavaScript的鼠標事件（11個事件）
阿新 • • 發佈：2019-04-27
菜單 htm 按鈕 lan pat contex set lang strong
鼠標的11個事件
具體的事件解釋如下：
- click：按下鼠標（通常是按下主按鈕）時觸發。
- dblclick：在同一個元素上雙擊鼠標時觸發。
- mousedown：按下鼠標鍵時觸發。
- mouseup：釋放按下的鼠標鍵時觸發。
- mousemove：當鼠標在一個節點內部移動時觸發。當- 鼠標持續移動時，該事件會連續觸發。為了避免性能問題，建議對該事件的監聽函數做一些限定，比如限定一段時間內只能運行一次。
- mouseenter：鼠標進入一個節點時觸發，進入子節點不會觸發這個事件（詳見後文）。
- mouseover：鼠標進入一個節點時觸發，進入子節點會再一次觸發這個事件（詳見後文）。
- mouseout：鼠標離開一個節點時觸發，離開父節點也會觸發這個事件（詳見後文）。
- mouseleave：鼠標離開一個節點時觸發，離開父節點不會觸發這個事件（詳見後文）。
- contextmenu：按下鼠標右鍵時（上下文菜單出現前）觸發，或者按下“上下文菜單鍵”時觸發。
- wheel：滾動鼠標的滾輪時觸發，該事件繼承的是WheelEvent接口。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { margin: 30px; width: 100px; height: 100px; background-color: red; } h4 { color: #fff; margin: 0; padding: 0; } .box { margin: 20px; width: 30px; height: 30px; background-color: pink; } </style> </head> <button id="btn1">click</button> <button id="btn2">dblclick</button> <button id="btn3">mousedown</button> <button id="btn4">mouseup</button> <div id="btn6"> <h4>mouseenter</h4> <h4>mouseover</h4> <div class="box"></div> </div> <div id="btn7"> <h4>mouseout</h4> <div class="box"></div> </div> <div id="btn8"> <h4>mouseleave</h4> <div class="box"></div> </div> <div id="btn9"> <h4>contextmenu</h4> <div class="box"></div> </div> <body> <script> // 事件1 click ： 按下鼠標即可以觸發 btn1.addEventListener('click', function () { alert('click') }) // 事件2 dblclick : 雙擊鼠標可以觸發事件 notice: 是dblclick btn2.addEventListener('dblclick', function () { alert('dbclick') }, { once: true }) // 加啦once 只會觸發一次。。。 // 事件3 mousedown 按下鼠標鍵時觸發 notice:此時我們監聽的是對於按鈕按下鼠標鍵才會觸發 btn3.addEventListener('mousedown', function () { alert('mousedown') }) // 事件4 mouseup // 點擊按鈕釋放鼠標鍵時才會觸發 btn4.addEventListener('mouseup', function () { alert('btn-mouseup') }) // 事件4 mouseup // 釋放鼠標鍵時將會觸發 那就綁定為document的全局事件 document.addEventListener('mouseup', function () { alert('mouseup') }) // notice 在為看來，不要在全局綁定這樣的事件，這樣的事件一般在函數內去觸發 // 事件5 mousemove 鼠標在移動時觸發，但是會持續觸發。(test 時，也使用去全局觸發) document.addEventListener('mousemove', function () { // console.log('moving……') }) // 事件6 鼠標進進入節點的一瞬間會立刻觸發，當進入子節點，或者離開時不會觸發 btn6.addEventListener('mouseenter', function () { // console.log('i am comming ^_^') }) // 事件7 鼠標進入節點會觸發這個事件。進入子節點還會觸發這個事件 btn6.addEventListener('mouseover', function () { console.log('i am mouseover') }) // 註意 這個與mouseenter 相比。會多觸發兩次 。離開節點進入自節點會觸發，離開子節點，進入父級節點還會觸發一次 // 事件8 mouseout 鼠標離開節點時觸發。當鼠標進入子接點，相當離開父節點，一樣會觸發該事件。從子節點離開，進入父級節點一樣會觸發該事件！ btn7.addEventListener('mouseout', function () { console.log('i am mouseout') }) // 事件9 mouseleave // 只有在父級節點出去的時候才會觸發。不會在子節點中觸發 btn8.addEventListener('mouseleave', function () { console.log('i am mouseleva') }) // 事件10 contextmenu // 點擊右鍵觸發 btn9.addEventListener('contextmenu',function(){ console.log('i am contextmenu') }) // 事件11 wheel document.addEventListener('wheel',function(){ console.log('i am mousewheel') }) </script> </body> </html>
總結
- click 事件是指的是，用戶在同一個位置完成mousedown動作，在完成mouseup動作。因此呢，執行的順序分別為，mousedown 首先觸發 -後續執行mouseup,然後執行click
- dbclick 事件會在mousedown - mouseup click - 後執行！
- mouseenter 和 mouseover 都是鼠標進入事件觸發，但是兩者的區別是。前者只觸發一次，後者會在子節點上多次觸發。
- mouseout mouseleave 都是鼠標離開時候觸發。但兩者的區別是，前者會在子節點內多次觸發。後者只會離開節點時觸發。
每日分享！JavaScript的鼠標事件（11個事件）