关于冒泡

最新推荐文章于 2021-09-30 10:05:36 发布

llsr_k

最新推荐文章于 2021-09-30 10:05:36 发布

阅读量187

点赞数

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/llsr_k/article/details/79141337

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>
<body>

    <div class="box2">
        box2
        <div class="box1">box1</div>
    </div>

    <script>

        var box1 = document.getElementsByClassName("box1")[0];
        var box2 = document.getElementsByClassName("box2")[0];


        //绑定事件(冒泡演示)
        box1.addEventListener("click", function (event) {
            alert("box1");

            //取消冒泡
            var event = event || window.event;
            if(event && event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }

        })

        box2.addEventListener("click", function () {
            alert("box2");
        })

        document.addEventListener("click", function () {
            alert("document");
        })



        //事件捕获
//        box1.addEventListener("click", function () {
//            alert("box1");
//        },true)
//
//        box2.addEventListener("click", function () {
//            alert("box2");
//        },true)
//
//        document.addEventListener("click", function () {
//            alert("document");
//        },true)




    </script>



</body>
</html>

llsr_k

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于冒泡

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box1 { width: 100px; height: 100px; float: left;
复制链接

扫一扫