js 事件冒泡和事件捕获

什么是事件冒泡和事件捕获

冒泡：事件 从下到上 由内到外
捕获：事件 从上到下 有外到内

用代码翻译就是

<div class="one">
            1
       <div class="two">
                2
           <div class="three">
                    3
           </div>
       </div>
</div>

document.getElementsByClassName("one")[0].addEventListener("click",(event)=>{
        console.log(event)
        event.stopPropagation();
        console.log("1")
},false)
document.getElementsByClassName("two")[0].addEventListener("click",(event)=>{
        event.stopPropagation();
        console.log("2")
},false)
document.getElementsByClassName("three")[0].addEventListener("click",(event)=>{
        event.stopPropagation();
        console.log("3")
},false)

先说一下addEventListener()的用法 ，addEventListener()接受三个参数 第一个参数表示事件的类型，参数类型为String ,第二个参数是一个回调函数，第三个参数是 useCapture 是一个布尔值，指定事件是否在冒泡或者捕获阶段执行，默认为false(事件在冒泡阶段执行)

上面有3个div 每个div 都有一个点击事件 会输出相应的数字
当useCapture为false是指定事件在冒泡阶段执行，点击最内层div 会输出 3 2 1
当useCapture为true是指定事件在捕获阶段执行，点击最内层div 时会输出 1 2 3