jQuery学习笔记（4.1）各种奇怪的事件mouseenter与mouseover的区别

1.mouseover()与mouseout()

muoseover() //鼠标经过事件

$("#p").mouseover(function(){
  alert("鼠标经过了");
});

mouseout() //鼠标离开事件

$("#p").mouseout(function(){
  alert("鼠标离开了");
});

2.mouseenter()与mouseleave()

muoseenter() //鼠标经过事件

$("#p1").mouseenter(function(){
  alert("鼠标经过了");
});

mouseleave() //鼠标离开事件

$("#p").mouseleave(function(){
  alert("鼠标离开了");
});

3.区别

mouseover：鼠标穿过被选元素或者其子元素时，都会触发事件。

mouseenter：鼠标穿过被选元素时，才会触发事件。
例：

html：

        <div class="mouseover" style="background-color:#000000;padding:10px;width:20%;float:left">
            <h2 style="background-color:white;">mouseover触发了：<span></span></h2>
        </div>
        <div class="mouseenter" style="background-color:#000000;padding:10px;width:20%;float:right">
            <h2 style="background-color:white;">Mouseenter触发了 ：<span></span></h2>
        </div>

js:

        x=0;
        y=0;
        $(function(){
            $("div.mouseover").mouseover(function(){
                $(".mouseover span").text(x+=1);
            });
            $("div.mouseenter").mouseenter(function(){
                $(".mouseenter span").text(y+=1);
            });
        });

效果：
mouseover效果：可以看到当鼠标进入黑色区域会触发mouseover，当进入白色区域也会，黑色就是被选的元素，而白色是被选元素的子元素

mouseenter效果：


可以看到鼠标进入黑色区域或白色区域只会触发一次，白色区域是被选元素的子元素也属于被选元素，所以鼠标穿过被选元素时，才会触发事件。

4.注意

1.mouseenter效率比mouseover高，一般多用mouseenter。
2.mouseover必须与mouseout成对一起用，mouseenter必须与mouseleave成对一起用，不能mouseover搭配mouseleave或别的组合，他们必须一对一对在一起才会有美好结局，毕竟强扭的瓜不甜。