事件冒泡和捕获

事件冒泡和捕获的概念

事件冒泡：事件在页面的传播顺序为逐层往上触发，即子级依次向上找到自己的父级依次进行对相同时间名称的事件传播

事件捕获： 事件在页面的传播顺序为 自上而下，即父级依次向上找到自己的子级依次进行对相同时间名称的事件传播

const app = document.querySelector("#app"));
app.addEventListener("click", () => {
    console.log("click");
}, false);

addEventListener中有三个属性，第三个属性是布尔值。

默认属性是false 为事件冒泡，true为事件捕获

以下为html中的代码

<div class="father">father
        <div class="son">son</div>
    </div>

    <script>
        father=document.querySelector('.father')
        son=document.querySelector('.son')
        father.addEventListener('click',function(){
            alert('我是父级')
        })
        
        son.addEventListener('click',function(){
            alert('我是子级')
        })  
    </script>

 以下是捕获和冒泡的实现过程

以下是冒泡作为讲解知识：事件冒泡方式：son——>father——>body——>html——>document

son绑定的点击事件，没有设置事件流方式，默认的事件流类型为false（事件冒泡），当点击son盒子的时候，事件流向上冒泡，首先弹出son消息框，再弹出father消息框。

 

阻止事件冒泡的方式

常用方法：

（1）事件委托：将元素的绑定事件写起其父元素上，防止事件冒泡

（2）event.stopPropagation()：可以阻止事件冒泡，阻止父级元素的绑定事件

son.addEventListener('click',function(e){
    alert('son')
//阻止事件冒泡
    e.stopPropagation();   
}) 

上面的例子中，加上e.stopPropagation()这句话，当点击son元素时，只会弹出son的弹窗，不加上这句话，点击son元素，会先弹出son，再弹出father。

stopPropagation（） 阻止事件向下一个元素传递。

stopImmeditaePropagation（）不光阻止事件向下一个元素传递，同时阻止该元素click事件的其它回调函数的调用。

---

注：

事件冒泡和事件的捕获在项目中会有很多地方都会用到，因为在了解事件是在绑定了相同的名称且有父子级关系触发事件之后会进行事件的传播，这样我们可以在写代码的时候，直接写出对父级进行一个事件的绑定和对子级相对应进行的变化的改变的代码。从而让其对代码的复用率。