鼠标移入事件onmouseover、onmouseenter 鼠标移出事件onmouseleave、onmouseout 的区别

onmouseenter和onmouseover都是鼠标移入事件，即鼠标放入到元素上相应事件触发，但是这两个事件是存在差别的。

onmouseover、onmouseout子元素会影响到父元素， 而onmouseenter和onmouseleave 子元素不会影响父元素

 var box = document.getElementById('box');
    var box2 = document.getElementById('box2');
    box.onmouseover = function(){
       /* qfMove({
           elem : box2,
           targetObj : { top : 0 }
       }); */

      // box2.style.top = 0;

      $(box2).animate({ top : 0 });

    };
    box.onmouseout = function(){
        /* qfMove({
           elem : box2,
           targetObj : { top : -100 }
       }); */

       //box2.style.top = '-100px';
       $(box2).animate({ top : -100 });
    };

当鼠标放入红色区域时，onmouseover事件触发，蓝色的小方块下来，但是此时将鼠标放入到蓝色小方块上时事件就会取消，这是因为蓝色小方块为红色小方块的子元素，当鼠标移动到蓝色区域时，onmouseover认为已经结束，onmouseout触发。

但是如果使用onmouseenter和onmouseleave时就不会这样了。