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

最新推荐文章于 2024-05-27 08:28:52 发布

原创最新推荐文章于 2024-05-27 08:28:52 发布 · 1.5w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom

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

鼠标移入移出事件

在这里插入图片描述

    <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('鼠标移出');
                }
            })