JS冒泡事件个人理解

cos²828

已于 2022-06-28 10:25:54 修改

阅读量142

点赞数 3

文章标签： javascript

于 2022-06-23 11:14:36 首次发布

本文链接：https://blog.csdn.net/qq_60899275/article/details/125421411

版权

概念：多个元素嵌套的时候，它们就会有层次关系，当这些元素添加了相同的事件时，如果其中一层的元素触发了这个事件，可能导致其它层的元素也触发这个事件

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冒泡事件</title>
</head>
<body>
    <div id="list1">
        <p id="p1">取消</p>
        <p id="p2">取消</p>
        <p id="p3">取消</p>
    </div>
    <hr>
    <div id="list2">
        <p id="p4">取消</p>
        <p id="p5">确定</p>
    </div>
</body>
<script>
    function bindEvent(elem,type,fn){
        elem.addEventListener(type,fn);
    }
    const p5 = document.getElementById('p5');
    const list1 = document.getElementById('list1');
    const body = document.body;

    bindEvent(body,'click',function() {
        console.log('取消');
    });
    bindEvent(p5,'click',function() {
        console.log('确定');
    });
</script>
</html>

此时，如果我们点击p5的话控制台会打印‘确定’和‘取消’，此时就是因为父级元素body冒泡使p5也触发了相应的事件，当然事物都是有两面性的，冒泡会影响我们代码的整体结果，造成混乱，但我们也可以利用好冒泡事件，带来正向影响。比如：当我们想要给list1下的p1，p2，p3都加上点击取消事件的话，一个一个加过于麻烦，我们可以利用冒泡机制，直接在他们父元素list1上加上此事件，便可一劳永逸。（需要注意的是，事件执行的顺序是先找自身对应的事件处理函数，然后再去寻找父级元素）。

消除冒泡机制影响的方法：

给p5的事件函数添加event对象，然后调用event下的event.stopPropagation();就可以阻止冒泡了

纯属抛砖引玉，个人拙见，可能不一定都对，欢迎大神们多多斧正，帮忙指出错误，感激万分✌

cos²828

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JS冒泡事件个人理解

概念：多个元素嵌套的时候，它们就会有层次关系，当这些元素添加了相同的事件时，如果其中一层的元素触发了这个事件，可能导致其它层的元素也触发这个事件上代码：此时，如果我们点击p5的话控制台会打印‘确定’和‘取消’，此时就是因为父级元素body冒泡使p5也触发了相应的事件，当然事物都是有两面性的，冒泡会影响我们代码的整体结果，造成混乱，但我们也可以利用好冒泡事件，带来正向影响。比如：当我们想要给list1下的p1，p2，p3都加上点击取消事件的话，一个一个加过于麻烦，我们可以利用冒泡机制，直接在他们父元素l
复制链接

扫一扫