JavaScript事件委托之鼠标移入移出事件

最新推荐文章于 2025-04-04 23:43:32 发布

我真是小菜鸟

最新推荐文章于 2025-04-04 23:43:32 发布

阅读量1.5w

点赞数 3

文章标签： javascript dom

本文链接：https://blog.csdn.net/htcvive/article/details/107417408

版权

本文介绍了JavaScript中的鼠标移入移出事件，推荐使用mouseenter和mouseleave进行事件绑定和监听，因为它们不会在子元素上重复触发。相比之下，mouseover和mouseout在子元素层级会频繁触发，不适合用于事件委托，而事件委托时则应选择mouseenter/mouseleave，以避免内部多次触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标移入移出事件

在这里插入图片描述

    <div class="parent">
        父元素
        <div class="child">
            子元素
        </div>
    </div>

mouseenter和mouseleave

这是一组鼠标移入和鼠标移出事件，如果是普通的事件绑定和事件监听，推荐用这一组

			child.onmouseenter = function(){
                console.log('鼠标移入');
            }
            child.onmouseleave = function(){
                console.log('鼠标移出');
            }

或者

			child.addEventListener('mouseenter' , function(){
                console.log('鼠标移入');
            })
            child.addEventListener('mouseleave' , function(){
                console.log('鼠标移出');
            })

mouseover和mouseout

如果是普通的事件绑定和事件监听，不推荐使用，因为这两个事件会在绑定事件内部频繁触发，从绑定元素到子元素会再次触发
而事件监听鼠标移入移出事件只能用这一组，上面的那组只会在委托事件上触发一次，内部不会触发；
将子元素的鼠标移入移出事件委托给父元素

			parent.addEventListener('mouseover',function(e){
                console.log(e.target);
                if(e.target === child){
                    console.log('鼠标移入');
                }
            })
            parent.addEventListener('mouseout',function(e){
                console.log(e.target);
                if(e.target === child){
                    console.log('鼠标移出');
                }
            })