探索事件冒泡和事件捕获在JavaScript中的工作原理
冒泡和捕获是DOM事件用来传播的2种模式。
假设你的DOM结构是
<div id="container">
<button>Click me</button>
</div>
你想跟踪用户点击button ，你有2个事件监听器，一个在按钮上，另一个在#container 。
记住，对一个子元素的点击将总是传播到它的父元素，除非你停止传播（见后文）。
这些事件监听器将被依次调用，这个顺序是由所使用的事件冒泡/捕获模型决定的。
冒泡意味着事件从被点击的项目（子项目）向上传播到其所有的父树，从最近的一个开始。
在我们的例子中，button 的处理程序将在#container 的处理程序之前启动。
捕获则相反：外部事件处理程序在更具体的处理程序（button ）之前被触发。
默认情况下，所有的事件都会冒泡。
你可以通过给addEventListener 添加第三个参数来选择采用事件捕获，将其设置为true 。
document.getElementById('container').addEventListener(
'click',
() => {
//window loaded
},
true
)
请注意，首先所有的捕获事件处理程序被运行。
然后是所有冒泡的事件处理程序。
这个顺序遵循这个原则：DOM从Window对象开始浏览所有元素，并去寻找被点击的项目。在这样做的时候，它调用与该事件相关的任何事件处理程序（捕获阶段）。
一旦它到达目标，它就会重复这个过程，一直到父树，直到Window对象，再次调用事件处理程序（冒泡阶段）。
