onmouseenter和onmouseover

最新推荐文章于 2024-07-07 20:04:18 发布

weixin_45846357

最新推荐文章于 2024-07-07 20:04:18 发布

阅读量869

点赞数

本文链接：https://blog.csdn.net/weixin_45846357/article/details/105938643

版权

onmouseover 与 onmouseenter 作为两个效果相似的鼠标事件，经常被我们使用，但是二者还是有区别的。

在具体的使用中，两者的效果是相似的，使用的场景并没有太大的区别，效果类似css中的hover。但是，两者还是存在一定的区别的，那就是mouseenter不支持冒泡，而mouseover支持冒泡。冒泡指的是事件冒泡，即在子元素上触发的事件会向上传递至父级元素，并触发绑定在父级元素上的相应事件。

那么，如何证明这两个事件是否支持，事件冒泡呢，js的事件机制给了我们一个很好的解决方法，那就是target(事件源)，在事件触发时，浏览器会产生一个event对象，在这个对象上有一个target属性，指向了触发事件的最底层的DOM，通过target我们可以准确的找到事件触发的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onmouseover&onmouseenter</title>
    <style> 
        #outer{
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px;
            border: 1px solid #ccc;
        }
        #inner{
            position: absolute;
            left: -50px;
            top: 0;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }       
    </style>
</head>
<body>
    <div id="outer">    
        <div id="inner"></div>
    </div>
    <script>
        outer.onmouseenter = function(e){
            console.log(e.target.id) // outer
        }
        outer.onmouseover = function(e){
            console.log(e.target.id) // inner
        }
    </script>
</body>
</html>

效果图：
在这里插入图片描述
当鼠标移到outer时：

当鼠标移到outer中的inner时：

当鼠标移到outer外的inner时：

weixin_45846357

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onmouseenter和onmouseover

onmouseover 与 onmouseenter 作为两个效果相似的鼠标事件，经常被我们使用，但是二者还是有区别的。在具体的使用中，两者的效果是相似的，使用的场景并没有太大的区别，效果类似css中的hover。但是，两者还是存在一定的区别的，那就是mouseenter不支持冒泡，而mouseover支持冒泡。冒泡指的是事件冒泡，即在子元素上触发的事件会向上传递至父级元素，并触发绑定在父级...
复制链接

扫一扫