javaScript事件（五）事件型別之滑鼠事件

starof發表於2014-11-19
JavaScript事件型別

一、事件

二、事件流

以上內容見：javaScript事件（一）事件流

三、事件處理程式

四、IE事件處理程式

以上內容見javaScript事件（二）事件處理程式

五、事件物件

以上內容見javaScript事件（三）事件物件

六、事件物件的公共成員

以上內容見javaScript事件（四）event的公共成員（屬性和方法）

七、滑鼠事件

DOM3級事件中定義了9個滑鼠事件。

  • mousedown:滑鼠按鈕被按下（左鍵或者右鍵）時觸發。不能通過鍵盤觸發。
  • mouseup:滑鼠按鈕被釋放彈起時觸發。不能通過鍵盤觸發。
  • click:單擊滑鼠左鍵或者按下Enter鍵時觸發。這點對確保易訪問性很重要，意味著onclick事件處理程式既可以通過鍵盤也可以通過滑鼠執行。
  • dblclick:雙擊滑鼠左鍵時觸發。
  • mouseover:滑鼠移入目標元素上方。滑鼠移到其後代元素上時會觸發。
  • mouseout:滑鼠移出目標元素上方。
  • mouseenter:滑鼠移入元素範圍內觸發，該事件不冒泡，即滑鼠移到其後代元素上時不會觸發。
  • mouseleave:滑鼠移出元素範圍時觸發，該事件不冒泡，即滑鼠移到其後代元素時不會觸發。
  • mousemove:滑鼠在元素內部移到時不斷觸發。不能通過鍵盤觸發。

note:

在一個元素上相繼觸發mousedown和mouseup事件，才會觸發click事件。兩次click事件相繼觸發才會觸發dblclick事件。

如果取消 了mousedown或mouseup中的一個，click事件就不會被觸發。直接或間接取消了click事件，dblclick事件就不會被觸發了。

1、事件觸發的順序

舉例：通過雙擊按鈕，看一下上面觸發的事件。

<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.addEventListener("mousedown",function(event){
        console.log("mousedown");
    },false);
    btn.addEventListener("mouseup",function(){
        console.log("mouseup");
    },false);
    btn.addEventListener("click", function () {
        console.log("click");
    },false);
    btn.addEventListener("dblclick", function () {
        console.log("dblclick");
    },false);
</script>
</body>
View Code

2、mouseenter和mouseover的區別

 區別：

mouseover事件會冒泡，這意味著，滑鼠移到其後代元素上時會觸發。

mouseenter事件不冒泡，這意味著，滑鼠移到其後代元素上時不會觸發。

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #outer{
            position: absolute;
            width: 200px;
            height: 200px;
            top:0;
            left: 0;
            bottom:0;
            right: 0;
            margin: auto;
            background-color: pink;
        }
        #inner{
            position: absolute;
            width: 100px;
            height:100px;
            top:50%;
            left:50%;
            margin-left: -50px;
            margin-top: -50px;;
            background-color: orange;
            text-align: center;
            line-height: 100px;
        }
        #outer,#inner{
            border-radius:50%;
        }
    </style>
    <script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<body>
<div id="outer">
        <div id="inner">
        </div>
</div>
</body>
<script>
var parentDiv=document.getElementById("outer");
parentDiv.addEventListener("mouseover", function () {
     console.log("父div的mouseover事件被觸發");
},false);

//parentDiv.addEventListener("mouseenter", function () {
//    console.log("父div的mouseenter事件被觸發");
//},false);
//parentDiv.addEventListener("mouseout", function () {
//    console.log("父div的mouseout事件被觸發");
//},false);
//parentDiv.addEventListener("mouseleave", function () {
//    console.log("父div的mouseleave事件被觸發");
//},false);
</script>
</body>
</html>
View Code

note:

mouseover對應mouseout,mouseenter對應mouseleave。效果可以取消上面程式碼的註釋來看。

 jquery中hover API是把mouseenter 和mouseleave組合在一起來用的。

3、滑鼠左鍵和右鍵

<script type="text/javascript">
document.onmousedown=function (ev)
{
    var oEvent=ev||event; //IE瀏覽器直接使用event或者window.event得到事件本身。
    alert(oEvent.button);// IE下滑鼠的 左鍵是1 ，  右鍵是2   ff和chrome下 滑鼠左鍵是0  右鍵是2
};
</script>

 

4、mouseover和mousemove的區別

一般情況下mouseover即可，特殊情況才用mousemove，mousemove更耗資源，比如要監控滑鼠座標的變化等。

 

待續。。。

 

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/4106904.html有問題歡迎與我討論，共同進步。

相關文章