mouseover和mouseenter的区别

以前对于mouseover和mouseenter有过接触，但未纠结于其中的具体细节，直到使用，才懂得其中的细节之处。

例1

<script type = "text/javascript" src = "https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type = "text/javascript">
	x=0;
	y=0;
	$(document).ready(function(){
	   $("div.over").mouseover(function(){
	     $(".over").text(x+=1);
	   });
	   $("div.enter").mouseenter(function(){
	     $(".enter").text(y+=1);
	   });
	});
</script>
<div class = "over" style = "background-color:lightgray;padding:20px;width:40%;float:left">
mouseover 事件：
</div>
<div class = "enter" style = "background-color:lightgray;padding:20px;width:40%;float:right">
mouseenter 事件：
</div>

从以上代码可以看出，当绑定着两个事件的元素里面没有子元素的时候，这两个事件的触发效果是一致的。
例2

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type = "text/javascript">
    x = 0;
    y = 0;
    $(document).ready(function () {
        $("div.over").mouseover(function () {
            $(".over span").text(x += 1);
        });
        $("div.enter").mouseenter(function () {
            $(".enter span").text(y += 1);
        });
    });
</script>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
    <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span>
    </h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
    <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span>
    </h2>
</div>

从例2可以看出，当绑定事件的元素里面有子元素的时候，鼠标经过绑定mouseover的当前元素以及它里面的子元素的时候，都会触发，而经过绑定mouseenter的元素时，只会在鼠标刚进入的时候触发，当进入其子元素的时候，是不会再触发的了。

结论

mouseenter：当鼠标移入某元素时触发。

mouseleave：当鼠标移出某元素时触发。

mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。

mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。

mousemove：鼠标在某元素上移动时触发，即使在其子元素上也会触发。

mouseout、mouseover和mouseleave、mouseenter最大的区别，在于子元素连带触发。

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave