当浏览器从服务端获取到HTML文件时，浏览器对文件进行解析，将HTML解析生成DOM树。DOM树上有很多节点，最大的为Document，里面会有<html>标签，它里面又包含了<head>和<body>标签，在<body>里可以有<div>、<span>等标签。
事件流：
事件是与浏览器或文档交互的瞬间，比如点击事件，鼠标移动事件、获得焦点、失去焦点等。它是HTML与JavaScript之间交互的桥梁。如上图DOM是树形结构，如果同时给父子节点都绑定同一事件，那么当触发子节点的时候，事件发生的顺序是什么，这就有了事件流的概念。
事件流就是事件完整执行过程的路径，分为捕获阶段和冒泡阶段。
假如说页面一个div，要找到div，先从最大的document开始找，一层一层找到HTML标签，再找到HTML里面的body，再找到body里面的div，这个过程就是事件流里面的捕获阶段，也就是从父到子的过程。当找到div时候，要告诉给document说我找到了，就一层一层往上走，从div到body到HTML，最后到document，这个阶段就是冒泡阶段，也就是从子到父。
事件冒泡：
当一个元素触发一个事件后，事件冒泡就会把这个事件冒泡到上面的所有父元素以及祖先元素，上面的父元素有这个同样的事件的话，就会触发。冒泡事件会默认存在。
举例来说：当我页面上有三个<div>,给这三个<div>都绑定了click事件
<div class="grangFather">
<div class="father">
<div class="son">
</div>
</div>
</div>
<script>
let son = document.querySelector('.son')
let father = document.querySelector('.father')
let grangFather = document.querySelector('.grangFather')
son.addEventListener('click', function () {
console.log(1)
})
father.addEventListener('click', function () {
console.log(2)
})
grangFather.addEventListener('click', function () {
console.log(3)
})
</script>当点击了类名为son的<div>，就会打印出1，2，3
当点击了类名为father的<div>，就会打印出2，3
当点击了类名为grangFather的<div>，就会打印出 3
这就是事件冒泡的过程。
事件捕获：
事件捕获与事件冒泡则相反。当一个元素触发一个事件后，事件捕获就会把这个事件从祖先元素捕获到子元素。
element.addEventListener(event, function, useCapture)addEventListener方法用来为一个特定的元素绑定一个事件处理函数，是JavaScript中的常用方法，其传入三个参数，分别是‘事件类型’，‘事件处理函数’，‘控制事件阶段’。第三个参数useCapture是Boolean类型，默认是false，表示在事件冒泡的阶段调用事件处理函数；如果传入true，就表示在事件捕获的阶段调用事件处理函数。
还是刚才上面的这个例子，给三个<div>都绑定了click事件。
son.addEventListener('click', function () {
console.log(1)
}, true)
father.addEventListener('click', function () {
console.log(2)
}, true)
grangFather.addEventListener('click', function () {
console.log(3)
}, true)当点击了类名为son的<div>，就会打印出3，2，1
当点击了类名为father的<div>，就会打印出3，2
当点击了类名为grangFather的<div>，就会打印出 3
这就是事件捕获的过程。
事件冒泡会默认存在，当在实际开发中，遇到事件冒泡会影响到父元素的情况时，就需要阻止事件流动，把事件限制在当前元素。
阻止事件冒泡：事件对象.stopPropagation( )
另：鼠标移动事件：Mouseover和mouseout有冒泡效果，Mouseenter和mouseleave没有冒泡效果
事件委托：
事件委托也被称为事件代理。利用事件冒泡可以做到事件委托。
子元素要触发事件，给父元素添加。当触发子元素的事件后，因为子元素没有这个事件，他由事件冒泡就去父元素找，父元素有就触发了。
使用场景：当父元素有很多子元素，要给这么多子元素添加事件显然有点繁琐，所以就利用事件委托，给父元素添加。