JS与HTML的交互是通过事件实现的，事件是指文档或浏览器窗口中发生的一些特定的交互瞬间，事件流描述的是从网页中接受事件的顺序
为什么会有事件流？举个例子，页面上有个按钮，当点击按钮的时候不仅仅是触发了按钮的click，同时触发了文档的click，因为按钮是文档的一部分。事件流分为事件冒泡流和事件捕获流
事件冒泡
事件冒泡是指事件开始时是由具体的元素接收这个事件，然后逐级向上传播到较为不具体的节点。即由文档中嵌套层次最深的节点传播到文档节点
示例HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="box" style="width: 300px;height: 30px; background: teal;"></div>
<script>
box.onclick = function(){box.innerHTML += 'div\n';}
document.body.onclick = function(){box.innerHTML += 'body\n';}
document.documentElement.onclick = function(){box.innerHTML += 'html\n';}
document.onclick = function(){box.innerHTML += 'document\n';}
window.onclick = function(){box.innerHTML += 'window\n';}
</script>
</body>
</html>
在事件冒泡过程中，点击页面中的div元素，click事件沿着DOM树传播的顺序如下：
(1) <div>
(2) <body>
(3) <html>
(4) document
(5) window
事件捕获
事件捕获是和事件冒泡相反的操作，表示由不具体的某个节点最先接收到这个事件，然后通过层层捕获到具体的那个节点。事件捕获的用意在于事件到达预订目标前就能捕获它
示例HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="box" style="width: 300px;height: 30px; background: teal;"></div>
<script>
box.addEventListener('click',function(){box.innerHTML += 'div\n'},true)
document.body.addEventListener('click',function(){box.innerHTML += 'body\n';},true);
document.documentElement.addEventListener('click',function(){box.innerHTML += 'html\n';},true);
document.addEventListener('click',function(){box.innerHTML += 'document\n';},true);
window.addEventListener('click',function(){box.innerHTML += 'window\n';},true);
</script>
</body>
</html>
在事件捕获过程中，window对象首先接收到click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标，即<div>元素，具体顺序如下：
(1) window
(2) document
(3) <html>
(4) <body>
(5) <div>
事件流
事件流又称作事件传播，DOM2级规定了事件流的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。