事件链原理（捕获、冒泡）

addEventListener 第三个参数  true 捕获阶段触发    false冒泡阶段触发  不写默认冒泡

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

            </div>
        </div>
    </div>
    <script>
       
       var   box1=document.querySelector(".box1")
       var   box2=document.querySelector(".box2")
       var   box3=document.querySelector(".box3")
       box1.addEventListener("click",(e)=>{
        console.log(bo11111)
       },true)
       box1.addEventListener("click",(e)=>{
        console.log(bo11111)
       },false)//冒泡阶段触发
       

先捕获，在冒泡

2、阻止冒泡

var   box1=document.querySelector(".box1")
       var   box2=document.querySelector(".box2")
       var   box3=document.querySelector(".box3")
       box1.addEventListener("click",(e)=>{
        console.log(box1,1111)
       },true)
    
       box3.addEventListener("click",(e)=>{
        console.log(box3,2211)
        e.stopPropagation()
       },false)

打印1  3

原因

 阻止冒泡只是阻止向上冒泡，而不是阻止发生

注意：

addEventListener的第三参数是true还是false是阻止事件传递

答案，都不是，是stopPropagation（）

3、阻止事件的一些方法

易错点

阻止冒泡，设计让监听器在捕获阶段运行  等等  都是值同一个事件

4、阻止系统默认事件

这样就可以阻止系统默认的本身的功能（跳转百度），