简单的理解事件冒泡与事件捕获

最新推荐文章于 2024-09-02 22:46:42 发布

子月吾生

最新推荐文章于 2024-09-02 22:46:42 发布

阅读量268

点赞数

分类专栏： JS 文章标签： JS

本文链接：https://blog.csdn.net/Sunday97/article/details/82828987

版权

JS 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

例如下面的图中外面的绿色的框为父级（parent），里面的橙色框为子级(child)

 var parent = document.getElementsByClassName("block_P")[0];
    var child = document.getElementsByClassName("block_C")[0];
    parent.onclick=function() {//给父级创建了一个点击事件
        console.log("我是父级");
    };

在上面的代码中表示点击绿色区域时会输出“我是父级”，但是在点击橙色框子时也会输出“我是父级”，这就可以理解为冒泡事件，即点即子级时会触发父亲的事件，由里向外去触发事件。
反之父级去执行给子级绑定的事件时就是事件的捕获
在这里插入图片描述
阻止冒泡行为：https://blog.csdn.net/Sunday97/article/details/90741229