事件冒泡的应用

事件执行的三个阶段

• 捕获阶段
• 当前目标阶段
• 冒泡阶段
  当我们为子元素添加事件之后,点击子元素之后,父元素捕获到事件判断是不是自己触发的（捕获）。不是就传递给子元素，然后执行回调函数，接下来子元素抛出事件（冒泡），父元素再抛出事件。这就是事件执行的流程。

注意点

三个阶段只有2个阶段会被同时执行，要么捕获和当前要么当前和冒泡
（也可以理解为，父元素和子元素中的回调函数执行的顺序。当我们点击子元素的时候，父元素算不算被点击。当然算啦那么我点击子元素之后，我先执行父元素的回调函数再执行子元素的就是捕获，先执行子元素的回调函数再执行父元素的就是冒泡。这个理解，我好像是在CSDN中看见某位博主的，记不得名字啦，抱歉啦）

案例

就是在ul里5个li，原始状态就是第一个li是被选中的状态。当我鼠标点击第二个li时，第二个li变成被选中的状态，第一个li则不是

 

 

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，默认是冒泡）
代码理解

链接：https://www.jianshu.com/p/e104f6ee5797