前端简单冒泡事例

最新推荐文章于 2025-09-27 14:15:10 发布

原创最新推荐文章于 2025-09-27 14:15:10 发布 · 297 阅读

1 ·

CC 4.0 BY-SA版权

回顾专栏收录该内容

6 篇文章

订阅专栏

回顾js，

<html>
<body>
<div class="demo"style=" width=300px; heigth=300px; background-color=red;" >
<button>按钮</button>
</div>

//先设一个盒子，在盒子设置一个按钮
在这里插入图片描述

<script>
     let demo = document.querySelector('.demo');
    let btn = document.querySelector('button');
    btn.addEventListener('click',function (e) {   //事件冒泡是从里面到外面 1>2>3
        // e.stopPropagation()   //阻止事件冒泡
        //e.preventDefault()  //阻止默认事件
        console.log(111111)
    })
       demo.addEventListener('click',function () {
        console.log(22222)
    })
    //当点击按钮的时候，会逐次打印 
</script>