JavaScript事件mouseover和mouseenter的区别

最新推荐文章于 2024-09-12 16:31:59 发布

W酱

最新推荐文章于 2024-09-12 16:31:59 发布

阅读量3.6k

点赞数 4

分类专栏： JavaScript 文章标签： javascript 事件 mouseover mouseenter

本文链接：https://blog.csdn.net/lwenn/article/details/45935457

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

如题，mouseover和mouseenter的区别主要在于监听对象的子元素是否触发事件。

mouseover：鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。
mouseenter：鼠标移入监听对象时触发，在监听对象内移动不会触发。

一个简单的示例

<!DOCTYPE HTML>
<html>
<head>
    <title>mouseover和mouseenter的区别</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        div {
            border: 1px solid darkred;
        }
        p {
            border: 1px solid hotpink;
        }
        #myDiv {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    body范围
    <div id="myDiv">
        最外层div
        <p id="p1">hello world</p>
        最外层div
        <p id="p2">hello world</p>
        最外层div
        <div id="subDiv">sub div</div>
        最外层div
    </div>
    body范围
    <script type="text/javascript">
        var div = document.getElementById("myDiv");
        var p1 = document.getElementById("p1");
        var p2 = document.getElementById("p2");
        var num1 = 0;
        var num2 = 0;
        div.addEventListener("mouseenter", function() {
            p1.innerHTML = "mouseenter: " + ++num1;
        });
        div.addEventListener("mouseover", function() {
            p2.innerHTML = "mouseover: " + ++num2;
        });
    </script>
</body>
</html>