js 事件-鼠标事件

鼠标事件

鼠标事件有哪些？

mousedown:鼠标按钮被按下（左键或右键）时触发。不能通过键盘触发
mouseup: 鼠标按钮被释放弹起时触发。不能通过键盘触发、
click：单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行
dbclick: 双击鼠标左键时触发
mouseover：当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseout: 当鼠标指针从元素上移开时，发生 mouseout 事件，该事件大多数时候会与 mouseover 事件一起使用。
mouseenter：该事件不冒泡，当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
mouseleave：该事件不冒泡当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
mousemove：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标，不能通过键盘触发

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>

2、mouseenter和mouseover的区别
区别：

mouseover事件会冒泡，这意味着，鼠标移到其后代元素上时会触发。

mouseenter事件不冒泡，这意味着，鼠标移到其后代元素上时不会触发。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
   
    <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>

mouseover对应mouseout,mouseenter对应mouseleave。效果可以取消上面代码的注释来看。

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

3、mouseover和mousemove的区别

一般情况下mouseover即可，特殊情况才用mousemove，mousemove更耗资源，比如要监控鼠标坐标的变化等。

鼠标事件

猜你喜欢