先说结果： 捕获 > 冒泡
说一下我的理解： 界面中的每个元素其实都会有感知事件的能力，元素感知的无非就是两种
- 捕获
- 冒泡
通常我们怎么给元素绑定一个监听呢？ 没错就是 addEventListener
dom.addEventListener('click', () => {}, ifCapture) 显而易见， 第三个参数就是告诉浏览器这个元素是否感知捕获事件，也就是在事件触发的那一刻是否执行你绑定的这个函数。 默认是 false 也就是感知冒泡事件。
<div class="baba">
<div class="son"></div>
</div>
document.addEventListener('click', e => {
console.log('document')
}, false)
ba.addEventListener('click', e => {
console.log('baba')
}, true)
son.addEventListener('click', e => {
console.log('son1')
}, false)
son.addEventListener('click', e => {
console.log('son2')
}, true)
打印结果： // baba son2 son1 document
然后我解释一下这个打印是怎么发生的：
- 在你点击元素 son 的时候， 点击这个动作先被 document 捕获到， 但是你绑定的方法是去感知冒泡的，此时是捕获阶段，所以不打印。捕获开始向子元素流， baba这个元素感知了捕获这个事件，打印结果 baba 继续向下流，son这个元素感知了捕获和冒泡，但是此时是捕获阶段，所以打印 son2， 捕获阶段结束，开始冒泡，从son元素开始向上， 打印 son1 document。
