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=0red.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.在事件绑定元素与子元素视觉上分离时，四种API都会将子元素溢出父元素的部分也视为父元素的触发区域
3.当没有父子关系的两个元素重叠在一起时，绑定事件的元素会将被覆盖的部分剔除触发区域
