一、什么是事件冒泡和捕获
一个事件发生后，会在子元素和父元素之间传播（
propagation）。这种传播分成三个阶段。
- 第一阶段：从
window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。 - 第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
- 第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。
这种三阶段的传播模型，使得同一个事件会在多个节点上触发。
<div>
<p>点击</p>
</div>
上面代码中，<div>节点之中有一个<p>节点。
如果对这两个节点，都设置click事件的监听函数（每个节点的捕获阶段和监听阶段，各设置一个监听函数），共计设置四个监听函数。然后，对<p>点击，click事件会触发四次。
var phases = {
1: 'capture',
2: 'target',
3: 'bubble'
};
var div = document.querySelector('div');
var p = document.querySelector('p');
div.addEventListener('click', callback, true);
p.addEventListener('click', callback, true);
div.addEventListener('click', callback, false);
p.addEventListener('click', callback, false);
function callback(event) {
var tag = event.currentTarget.tagName;
var phase = phases[event.eventPhase];
console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'");
}
// <p>节点有两个监听函数，两个函数的第三个参数不同，它们都会因为click事件触发一次
// 点击以后的结果
// Tag: 'DIV'. EventPhase: 'capture'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'DIV'. EventPhase: 'bubble'
事件传播的最上层对象是window，接着依次是document，html（document.documentElement）和body（document.body）。也就是说，上例的事件传播顺序，在捕获阶段依次为window、document、html、body、div、p，在冒泡阶段依次为p、div、body、html、document、window。
二、事件的代理
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。
var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
if (event.target.tagName.toLowerCase() === 'li') {
// some code
}
});
上面代码中，click事件的监听函数定义在<ul>节点，但是实际上，它处理的是子节点<li>的click事件。这样做的好处是，只要定义一个监听函数，就能处理多个子节点的事件，而不用在每个<li>节点上定义监听函数。而且以后再添加子节点，监听函数依然有效。
三、关于使用addEventListener与直接使用onclick等绑定事件
<div class="outside" onclick="callback1()">
<div class="inside" onclick="callback2()">里层</div>
</div>
function callback1(){
console.log(10)
}
function callback2(){
console.log(20)
}
这时候点击里层，会先输出20，然后输出10；
function callback1(){
console.log(10)
}
function callback2(event){
event = event || window.event;
event.stopPropagation();
console.log(20)
}
把冒泡禁止的话控制台只会输出20；因此禁止冒泡可以消除一些场景下事件对外层元素的影响。
关于
addEventListener与直接绑定事件的区别:
addEventListener可以指定是在冒泡还是捕获阶段监听。直接使用onclick或者vue的v-on:click等绑定事件的话，从结果来看外层元素只会受到里层元素事件冒泡的影响。
