事件执行的三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
当我们为子元素添加事件之后,点击子元素之后,父元素捕获到事件判断是不是自己触发的（捕获）。不是就传递给子元素，然后执行回调函数，接下来子元素抛出事件（冒泡），父元素再抛出事件。这就是事件执行的流程。
注意点
三个阶段只有2个阶段会被同时执行，要么捕获和当前要么当前和冒泡
（也可以理解为，父元素和子元素中的回调函数执行的顺序。当我们点击子元素的时候，父元素算不算被点击。当然算啦那么我点击子元素之后，我先执行父元素的回调函数再执行子元素的就是捕获，先执行子元素的回调函数再执行父元素的就是冒泡。这个理解，我好像是在CSDN中看见某位博主的，记不得名字啦，抱歉啦）
案例
就是在ul里5个li，原始状态就是第一个li是被选中的状态。当我鼠标点击第二个li时，第二个li变成被选中的状态，第一个li则不是
开始状态.png
上代码
let oUl=document.querySelector("ul");
let oLi=document.querySelector(".selected");
console.log(oLi);
oUl.onclick=function (event){//onclick，默认是冒泡
event= event|| window.event;//兼容处理
// console.log(event.target); event.target的作用就是拿到点击的子元素
oLi.className="";
event.target.className="selected";
oLi=event.target;
}
当我们点击子元素的时候,父元素捕获发现不是自己触发的,就传递给子元素,然后看看自己被设置的是捕获还是冒泡。冒泡耶，先执行子元素的回调函数，子元素没有然后我在执行父元素的函数。（onXxx，默认是冒泡）
代码理解
