JS事件流模型
事件捕获Event Capturing是一种从上而下的传播方式，以click事件为例，其会从最外层根节向内传播到达点击的节点，为从最外层节点逐渐向内传播直到目标节点的方式。
事件冒泡Event Bubbling是一种从下往上的传播方式，同样以click事件为例，事件最开始由点击的节点，然后逐渐向上传播直至最高层节点。
DOM0级模型
也称为原始事件模型，这种方式较为简单且兼容所有浏览器，但是却将界面与逻辑耦合在一起，可维护性差。
例子
<style>
div {
height: 400px;
400px;
400px;
background-color: teal;
margin: auto;
400px;
}
span {
display: inline-block;
100px;
height: 100px;
background-color: tomato;
margin: auto;
margin-top: 100px;
}
</style>
<div>
<span></span>
</div>
<script>
var div = document.querySelector('div');
var span = document.querySelector('span');
// 捕获阶段 1
div.addEventListener('click', function(e) {
console.log('捕获阶段' + e.eventPhase);
}, true);
//冒泡阶段 3
div.addEventListener('click', function(e) {
console.log('冒泡阶段' + e.eventPhase);
}, false)
// 事件目标 2
span.onclick = function(e) {
console.log('事件目标' + e.eventPhase);
}
点击div出现捕获冒泡阶段
当点击span时出现捕获、事件、冒泡
IE8及之前的版本是不支持捕获事件的，IE事件模型共有两个过程:
事件处理阶段target phase，事件到达目标元素, 触发目标元素的监听事件。
事件冒泡阶段bubbling phase事件从目标元素冒泡到document，依次执行经过的节点绑定的事件。
DOM2
DOM2事件模型是W3C制定的标准模型，支持捕获型事件和冒泡型事件，调用事件的处理阶段依次为捕获、目标、冒泡。
绑定监听事件使用的区别
在DOM0中直接绑定函数执行时，后定义的函数会覆盖前边绑定的函数，下面这个例子只执行alert(1)而不执行alert(0)。click()是一个对象事件，点击即触发onclick()绑定的方法，onclick()是对象的属性，将其绑定函数后即为click()事件触发后执行的方法。
`<style type="text/css"> div{ display: flex; justify-content: center; align-items: center; } </style> <body> <div id="i1" style="height: 150px; 150px;background: red;"></div> </body> <script type="text/javascript"> document.getElementById("i1").onclick = function(){ alert(0); } // 被覆盖 document.getElementById("i1").onclick = function(){ alert(1); } // 执行 </script> </html>`
addEventListener可以为事件绑定多个函数，并且绑定时不需要加on，其还可以接收第三个参数useCapture来决定事件时绑定的捕获阶段还是冒泡阶段执行。
`document.getElementById("i1").addEventListener('click',function(e) { alert(0); }) // 执行 document.getElementById("i1").addEventListener('click',function(e) { alert(1); }) // 执行`
attachEvent可以为事件绑定多个函数，绑定时需要加on，其只支持冒泡阶段执行，所以不存在第三个参数。
`document.getElementById("i1").attachEvent('onclick',function(e){ alert(0); }) // 执行 document.getElementById("i1").attachEvent('onclick',function(e){ alert(1); }) // 执行`