要认识事件冒泡和事件捕获，我们就得从事件流说起 我们可以想一个问题：当我们在浏览器上对一个元素进行点击的时候，你点击的不仅仅是这个元素本身； 这是因为我们的HTML元素时存在父子元素叠加层级的，比如一个span元素是放在div元素上的，div元素时放在body元素上的，body是放在html元素上的
const spanEl = document.querySelector("span")
const divEl = document.querySelector(".container")
spanEl.addEventListener("click", () => {
console.log("事件冒泡:span元素被点击了")
})
divEl.addEventListener("click", () => {
console.log("事件冒泡:div元素被点击了")
})
document.body.addEventListener("click", () => {
console.log("事件冒泡:body元素被点击了")
})
输出结果是
我们会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡（EventBubble）。
事实上，还有另外一种监听事件流的方式就是从外层到内层（body -> span），这种称之为事件捕获（EventCapture）；
为什么会产生两种不同的处理流呢？
这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题，但是他们采用了完全相反的事件流来对事件进行了传递； IE采用了事件冒泡的方式，Netscape采用了事件捕获的方式； 那么我们如何去监听事件捕获呢？
在addeventListener事件里面将第三个参数设置为true即可
然后当我们点击span的时候，会先执行事件捕获，然后执行事件冒泡
所以当两者都存在的时候，先执行事件捕获，然后在执行事件冒泡
