Fork me on GitHub

JavaScript事件(五)事件类型之鼠标事件

鼠标事件

  • DOM3级事件中定义了9个鼠标事件:
    • mousedown鼠标按钮被按下(左键或者右键)时触发。不能通过键盘触发。
    • mouseup鼠标按钮被释放弹起时触发。不能通过键盘触发。
    • click单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行
    • dblclick双击鼠标左键时触发。
    • mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
    • mouseout:鼠标移出目标元素上方。
    • mouseenter:鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不会触发
    • mouseleave:鼠标移出元素范围时触发,该事件不冒泡,即鼠标移到其后代元素时不会触发
    • mousemove鼠标在元素内部移动时不断触发。不能通过键盘触发。
事件触发的顺序
  • 举例:通过双击按钮,看一下所触发的事件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <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>
  • 事件触发的顺序如下:

    1
    2
    3
    4
    5
    6
    7
    mousedown
    mouseup
    click
    mousedown
    mouseup
    click
    dbclick
mouseenter和mouseover的区别
  • mouseover事件会冒泡,这意味着,鼠标移到其后代元素上时会触发。
  • mouseenter事件不冒泡,这意味着,鼠标移到其后代元素上时不会触发。
  • 举例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <!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>
    </head>
    <body>
    <div id="outer">
    <div id="inner">
    </div>
    </div>
    <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>
  • 鼠标从外面移入圆心,外面圆的mouseover事件被触发2次,第二次是里面圆的mouseover事件冒泡到外面圆而触发的。

  • 当鼠标从外面移入圆心,外面圆的mouseenter事件被触发一次,因为mouseenter事件不冒泡,鼠标移到后代元素不会触发。
  • 另外,mouseover对应mouseoutmouseenter对应mouseleave。效果可以取消上面代码的注释来看。
鼠标左键和右键
  • IE下鼠标的左键是1,右键是2。
  • ff和chrome下,鼠标左键是0,右键是2。
  • 示例代码:
    1
    2
    3
    4
    5
    6
    <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>
mouseover和mousemove的区别
  • mousemove事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个事件对象event,event.clientXevent.clientY属性代表鼠标的坐标。
  • mouseover事件会在鼠标移入对象时触发。
  • 一般情况下mouseover即可,特殊情况才用mousemove,因为mousemove更耗资源,比如要监控鼠标坐标的变化等。
------ 本文结束 ------