js事件捕获事件冒泡

事件的三个阶段：捕获阶段、目标阶段、冒泡阶段。

事件流：从页面接受事件的顺序。

捕获阶段：事件第一阶段，从document逐级往下传递事件到目标元素的过程

目标阶段：事件第二阶段，事件流处于当前目标元素的这一段时期

冒泡阶段：事件第三阶段，从目标元素往上传递事件到目标元素的过程

 

 <div class="btn3" style="width: 150px;height: 100px;background-color: aqua;margin: 0 auto;">
        btn3
        <div class="btn2" style="width: 100px;height: 50px;background-color: red;">
            btn2
            <div class="btn1" style="width: 50px;height: 30px;background-color:saddlebrown;">
                 btn1
            </div>
        
        </div>
    </div>

创建三个div，给每个div添加监听事件，方法addEventListener()第三个参数默认为false，表示监听冒泡阶段传递过来的事件。

true表示监听捕获阶段传递过来的事件。

 let btn1 = document.querySelector(".btn1");
    let btn2 = document.querySelector(".btn2");
    let btn3 = document.querySelector(".btn3");
    btn1.addEventListener("click",()=>{
        console.log("btn1 捕获");
    },true) 
    btn2.addEventListener("click",(ev)=>{
        console.log("btn2 捕获");
    },true)
    btn3.addEventListener("click",(ev)=>{
        console.log("btn3 捕获");
    },true)
   
    btn1.addEventListener("click",(ev)=>{
        console.log("btn1 冒泡");
    },false)
    btn2.addEventListener("click",()=>{
        console.log("btn2 冒泡");
    },false)
    btn3.addEventListener("click",()=>{
        console.log("btn3 冒泡");
    },false)

点击btn1

输出：

点击btn1时候，元素进入捕获阶段，从document开始逐级传递click事件到btn2，并触发这一路径中的元素。捕获阶段后进入目标阶段，进入目标阶段的btn1，开始按绑定先后的顺序来处理监听btn1的事件，不区分捕获阶段还是冒泡阶段。目标阶段后进入冒泡阶段，逐级往上传递事件。

取消冒泡：

  有时候并不希望事件冒泡，可以使用stopPropagation()阻止事件捕获和冒泡的进行。

  btn2.addEventListener("click",(ev)=>{
          ev.stopPropagation()
        console.log("btn2 捕获");
    },true)

事件委托：如果有多个DOM节点需要监听事件的情况下，给每个DOM绑定监听函数，会极大的影响页面的性能，因为我们通过事件委托来进行优化，事件委托利用的就是冒泡的原理。

     如下面的代码片段，为了给每一个li都添加事件，只需要给他们的父元素ul添加监听事件，由于冒泡，点击任意一个li都会把该事件传递给ul，但这时候仅仅是能监听到事件，要想知道哪个元素触发的事件，需要使用到target属性获取到触发的元素。

target：触发该事件的具体元素。

currentTarget：当前事件绑定在哪个元素上。

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>