技術標籤：js

ie8之前的方法
滑鼠移出 mouseover
滑鼠移入 mouseout

ie8之後的方法
滑鼠移出 mouseenter
滑鼠移入 mouseleave

兩者區別

	<div id="red">
        <div id="blue">0</div>  
    </div>
    <script>
        var red=document.getElementById("red")
        var blue=document.getElementById
 
("blue")
        var i=0
        red.onmouseover=function(){ blue.innerHTML=++i } 
    </script>

藍色div是紅色div的子元素，給紅色div繫結滑鼠移入事件，事件為顯示遞增數字，如【圖1】

如果繫結的是mouseover，滑鼠不僅會在進入紅色div時觸發，如【圖2】
還會在進入藍色div的邊界時觸發，如【圖3】

如果繫結的是mouseenter，則不會出現【圖3】的情況，

如果藍塊還是紅塊的兒子，但使用定位，使紅塊與藍塊視覺上不重合，會怎麼樣？

雖然視覺上分離了，但是結構上依然存在，結果與重合的情況相同，

如果紅塊與藍塊是兄弟關係，使用定位將其重疊在一起，會怎麼樣？

當兩者只是重疊在一起的兄弟元素
使用mouseover與mouseenter都是如下情況：
滑鼠從藍塊進入，並不會觸發紅塊的移入事件，如【圖4】
而從藍塊進入紅塊卻會觸發事件，如【圖6】

結論

1.mouseover與mouseout會在事件繫結元素的子元素上移入移出時再次觸發，而mouseenter與mouseleave不會有這種bug
2.在事件繫結元素與子元素視覺上分離時，四種方法都會將子元素溢位父元素的部分也視為父元素的觸發區域
當沒有父子關係的兩個元素重疊在一起時，繫結事件的元素會將被覆蓋的部分剔除觸發區域

對於事件繫結的元素，溢位的子元素是事件觸發區域的延伸，重疊的兄弟元素是事件觸發區域的剔除