阅读 82

浅谈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,
他们就很冷漠,不干涉和参与子孙的活动,
也不在家族群冒泡

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

关注下面的标签,发现更多相似文章
评论