事件冒泡

最新推荐文章于 2024-07-25 20:08:25 发布

敲出真谛

最新推荐文章于 2024-07-25 20:08:25 发布

阅读量268

点赞数

分类专栏： js 文章标签： js 事件冒泡

本文链接：https://blog.csdn.net/qq_36818627/article/details/88898596

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

所谓事件冒泡是指当子元素触发一个事件之后会触发父级元素发生同类型的事件。

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Aui车养护</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        #wrap {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 50px auto;
            background-color: #f66;
        }

        #box {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            transform: translate(-50%, -50%);
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="box">
        </div>
    </div>
    <script>
        wrap.onclick = () => {
            console.log("点击了大盒子");
        }
        box.onclick = () => {
            console.log("点击了小盒子");
        }
    </script>
</body>

</html>

当我们点击小盒子的时候，会同时触发父级盒子。这在有些场合是我们不需要的，比如父级和子级元素都有相同的事件但是操作的内容是不同的，当点击子元素时子元素隐藏，再点击父元素时让盒子显示。你会发现无法实现。（顺便说一下，元素的id属性，不获取也是可以直接拿来使用的，但是真正开发的时候不推荐。）

 <script>
        wrap.onclick = () => {
            console.log("点击了大盒子");
            box.style.display = "block";
        }
        box.onclick = () => {
            console.log("点击了小盒子");
            box.style.display = "none";
        }
    </script>

那么问题来了，我们怎么避免这样的事情发生呢？那就要阻止事件冒泡了，但是这个东西有个不好的地方就是兼容性的问题。

正常模式：e.stopImmediatePropagation() 也可以简写为e.stopPropagation();

兼容ie: e.cancleBubble = true;

 <script>
        wrap.onclick = () => {
            console.log("点击了大盒子");
            box.style.display = "block";
        }
        box.onclick = (e) => {
            e = e || window.event;
            e.stopPropagation?e.stopPropagation():e.cancleBubble = true;
            console.log("点击了小盒子");
            box.style.display = "none";
        }
    </script>

这样就能完美实现了，美滋滋...

任何事物都有两面性，事件冒泡也有他有利的一面，在接下来我会介绍事件委托代理原理，就是应用事件冒泡来实现的。