浅谈mouseenter和mouseover，mouseout和mouseleave

介绍（MDN）

mouseover：当指针设备移动到存在监听器的元素或其子元素的时候，mouseover事件就会被触发。
mouseenter：当定点设备（通常指鼠标）移动到元素上时就会触发 mouseenter 事件

mouseout：事件在当指针设备（通常是鼠标）移出了附加侦听器的元素或关闭了它的一个子元素时触发。
mouseleave：指点设备（通常是鼠标）的指针移出某个元素时，会触发mouseleave事件。

异同（简略版）

	触发条件	是否冒泡
mouseenter	鼠标指针穿过被选元素	否
mouseover	鼠标指针穿过被选元素或其子元素、孙元素	是
mouseleave	鼠标指针穿过被选元素	否
mouseout	鼠标指针穿过被选元素或其子元素、孙元素	是

执行顺序

<div></div>
<script>
    var div = document.getElementsByTagName('div')[0];
    eventBind(div, 'mouseenter', 'mouseenter');
    eventBind(div, 'mouseover', 'mouseover');
    eventBind(div, 'mouseout', 'mouseout');
    eventBind(div, 'mouseleave', 'mouseleave');
    function eventBind(ele, event, output){//简单封装个绑定函数
        ele.addEventListener('event',function(){
            console.log(output);
        })
    }//测试展示如下图
</script>

触发条件

按照介绍中给出的定义
不论鼠标指针穿过被选元素或其子元素、孙元素，都会触发mouseover事件
只有鼠标指针穿过被选元素时，才会触发mouseenter事件

<div>
    <h2>被绑定的<span class="eventType"></span>事件被触发<span class="count">0</span></h2>
    </div>
<div>
    <h2>被绑定的<span class="eventType"></span>事件被触发<span class="count">0</span></h2>
</div>
<script>
    var div = document.getElementsByTagName('div');
    function bindEvent(ele, event, output){
        var eventType = ele.getElementsByClassName('eventType')[0];
        var count = ele.getElementsByClassName('count')[0];
        eventType.textContent = event;
        ele.addEventListener(event,function(){
            count.textContent = parseInt(count.textContent)+1;
        })
    }
    
    bindEvent(div[0], 'mouseover', 'mouseover');
    bindEvent(div[1], 'mouseenter', 'mouseenter');
</script>

运动轨迹

触发说明

Tips:图中的每一个独立箭头都会触发以此对应的事件

---

按照介绍中给出的定义
只有鼠标指针穿过被选元素时，才会触发mouseleave事件
不论鼠标指针穿过被选元素或其子元素、孙元素，都会触发mouseout事件

//...借用上面代码
bindEvent(div[0], 'mouseleave', 'mouseleave');
bindEvent(div[1], 'mouseout', 'mouseout');//测试展示如下图

运动轨迹

触发说明

Tips:图中的每一个独立箭头都会触发以此对应的事件

冒泡

mouseenter事件不冒泡

mouseleave事件不冒泡

mouseover事件冒泡

mouseout事件冒泡

<div class="outer">
    <div class="inner">
    </div>
</div>
<script>
    var div = document.getElementsByTagName('div');
    function bindEvent(ele, event, output){
        ele.addEventListener(event,function(e){
            console.log(output);
        })
    }
    bindEvent(div[0], 'mouseover', 'outer');
    bindEvent(div[1], 'mouseover', 'inner');
</script>

题外话

有两个家庭
第一个家庭的夫妇分别叫over和out,
他们比较关心自己的子孙，子孙有什么事都会去帮助他们处理，
在家族群他们经常冒泡参与讨论；
另外一个家庭的夫妇分别叫enter和leave，
他们就很冷漠，不干涉和参与子孙的活动，
也不在家族群冒泡

若文章有什么问题还请各位看官指出，谢谢！