JavaScript常見(jiàn)鼠標(biāo)事件與用法分析

更新時(shí)間：2019年01月03日 14:22:21 作者：司馬懿字仲達(dá)

這篇文章主要介紹了JavaScript常見(jiàn)鼠標(biāo)事件與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript 8種常見(jiàn)的鼠標(biāo)事件與相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript常見(jiàn)鼠標(biāo)事件與用法。分享給大家供大家參考，具體如下：

JavaScript 鼠標(biāo)事件有以下8種

mousedown
鼠標(biāo)的鍵鈕被按下。

mouseup
鼠標(biāo)的鍵鈕釋放彈起。

click
鼠標(biāo)左鍵（或中鍵）被單擊。

事件觸發(fā)順序是：mousedown -> mouseup -> click

dblclick
鼠標(biāo)左鍵（或中鍵）被雙擊。

事件觸發(fā)順序是：mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick。

contextmenu
彈出右鍵菜單，它可能是鼠標(biāo)右鍵觸發(fā)的，也可能是鍵盤(pán)的菜單鍵觸發(fā)的。

mouseover
鼠標(biāo)移動(dòng)到目標(biāo)上方。

mouseout
鼠標(biāo)從目標(biāo)上方移出。

mousemove
鼠標(biāo)在目標(biāo)上方移動(dòng)

注意：事件名稱大小寫(xiě)敏感。若需要監(jiān)聽(tīng)以上事件，則在事件名的前面加個(gè)on即可。

事件區(qū)別

onmouseover、nmouseout：鼠標(biāo)移動(dòng)到自身時(shí)候會(huì)觸發(fā)事件，同時(shí)移動(dòng)到其子元素身上也會(huì)觸發(fā)事件

onmouseenter、onmouseleave：鼠標(biāo)移動(dòng)到自身是會(huì)觸發(fā)事件，但是移動(dòng)到其子元素身上不會(huì)觸發(fā)事件

全局事件對(duì)象event

event.x
事件發(fā)生時(shí)鼠標(biāo)的位置

event.y
事件發(fā)生時(shí)鼠標(biāo)的位置

button
鼠標(biāo)的哪一個(gè)鍵觸發(fā)的事件

0
鼠標(biāo)左鍵
1
鼠標(biāo)中鍵
2
鼠標(biāo)右鍵

代碼范例

<html>
  <body>
    <script type="text/javascript">
      function appendText(str) {
        document.body.innerHTML += str + "<br/>";
      }
      document.onmousedown = function() {
        appendText("onmousedown");
        appendText("button = " + event.button);
        appendText("(x,y) = " + event.x + "," + event.y);
      }
      document.onmouseup = function() {
        appendText("onmouseup");
      }
      document.onclick = function() {
        appendText("onclick");
      }
      document.ondblclick = function() {
        appendText("ondblclick");
      }
      document.oncontextmenu = function() {
        appendText("oncontextmenu");
      }
      document.onmouseover = function() {
        appendText("onmouseover");
      }
      document.onmouseout = function() {
        appendText("onmouseout");
      }
      document.onmousemove = function() {
        appendText("mousemove");
      }
    </script>
  </body>
</html>

這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，得到如下運(yùn)行結(jié)果：