关于addEventListener()的第三个参数问题

<style>
        .box{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: chocolate;
        }
        .bbox{
            width: 100px;
            height: 100px;
            background-color: cyan;
        }
    </style>


<div class="bbox" id="bbox">
        <div class="box" id="box"></div>
    </div>


<script>
        var bbox=document.getElementById("bbox");
        bbox.addEventListener("click",function(){
            console.log("外部盒子事件触发")
        },true)



        var box=document.getElementById("box");
        box.addEventListener("click",function(e){
            console.log("内部盒子点击事件")
            
        },true);
    </script>
``
上面案例使用了addEventListener("第一个参数",第二个参数，第三个参数);
第一个参数是事件类型，移动端的事件类型是touch；PC端是click。第二个是函数，第三个是true/false。如果不写第3个参数，默认是false。

在上面的样式中，外部盒子里面包裹了一个内部盒子，两个盒子都有对应的事件。第三个参数的作用是决定事件的触发是在捕获阶段 ，还是在冒泡阶段。默认是false,就是冒泡阶段。所以如果是false，根据冒泡原理，点击内部的盒子触发事件时，会向外冒泡 触发外部盒子的事件。就会先打印内部事件，再打印外部事件。

而如果写成了true。则会在捕获阶段触发事件，所以会先打印外部盒子的事件，再打印内部事件。


同时注意的是，addEventListener()作用是对元素绑定一个事件，而一个元素可以有多个addEventListener绑定事件。

```javascript

可以默认不写false

box.addEventListener("click",()=>{
    console.log("要打印信息");
})