事件的三个阶段：捕获阶段、目标阶段、冒泡阶段。
事件流：从页面接受事件的顺序。
捕获阶段：事件第一阶段，从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>
