老师,onmouseenter不冒泡是什么意思

使用onmouseenter时不会结果事件流的冒泡和捕获阶段吗?

__Promise 2021-06-19

源自：DOM 7-1 课程总结

收起

2回答

好帮手慕言回答被采纳获得+3积分 2021-06-20 14:13:06

同学你好，还是有差别的，onmouseover事件加上e.stopPropagation()之后，在鼠标移入时和onmouseenter事件是一样的，但是在鼠标移出子元素时，还会触发父元素的移出事件，同学可以按照下方箭头的方向操作一下

同学知道这些事件的区别即可，祝学习愉快~

收起回答

好帮手慕言 2021-06-20 10:45:28

同学你好，不冒泡可以简单理解为：触发子元素的事件时，父元素的同名事件不会被触发，如下：

当鼠标移入父元素时，打印”parent 的事件被触发了“，移入子元素时，打印”child 的事件被触发了“

如果换成onmouseover事件（此事件是会冒泡的），当鼠标移入父元素时，打印”parent 的事件被触发了“，移入子元素时，先打印”child 的事件被触发了“，再打印”parent 的事件被触发了“

同学可以自己测试下代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child">child</div>
    </div>
    <script>
        var parentEle = document.querySelector(".parent")
        var childEle = document.querySelector(".child")
        // parentEle.onmouseenter = function () {
        //  console.log("parent 的事件被触发了")
        // }
        // childEle.onmouseenter = function () {
        //  console.log("child 的事件被触发了")
        // }
        parentEle.onmouseover = function () {
            console.log("parent 的事件被触发了")
        }
        childEle.onmouseover = function () {
            console.log("child 的事件被触发了")
        }
    </script>
</body>

</html>