前半部分，事件从最外面的父div依次传递到最里面的后代div， 1-2-3-4这部分我们叫捕获过程 。
之后事件又从最里层的后代div逐层传出， 4-3-2-1这部分我们叫冒泡过程 。
如果我把捕获监听器和冒泡监听器都加上，如下图这样。
这时我们有8个监听器了，在捕获过程和冒泡过程都有监听。输出如下图。
如果我去除几个监听器如下图。为了容易理解我调整了格式
仍然是按照箭头顺序，明显应该输出1423。
在不使用任何框架的情况下，我们在js中通过addEventListener方法给Dom添加事件监听。这个方法有三个参数可以传递addEventListener(event,fn,useCapture)。event是事件类型click，focus，blur等；fn是事件触发时将执行的函数方法（function）；第三个参数可以不传，默认是false，这个参数控制是否捕获触发。所以我们只穿两个参数时，这个事件是冒泡传递触发的，当第三个参数存在且为true时，事件是捕获传递触发的。
使用框架时可使用对应的框架提供的方法。如上面我使用了Vue框架，通过事件装饰来区分捕获与冒泡。
在不使用任何框架的情况下，我们在js中通过stopPropagation方法阻止事件继续传递。
使用框架时可使用对应的框架提供的方法。接下来我将了Vue框架的stop修饰符来阻止事件传递。
我们可以在传递过程中阻止事件继续传递，防止触发不需要的事件。
如图我在第三层捕获后阻止事件继续传递，那么后面的log方法不会继续执行。最终只输出1-2-3。
我们在使用中多数情况下只使用冒泡监听。例如一条购物车信息，在这条信息中，右下角有一个删除按钮。点击这条消息可查看详情，点击删除按钮可将此商品移除。我们会分别给信息的div和删除button添加一个冒泡的click事件监听。如果不做阻止传递，点击删除button后，会显示商品详情。显然这不是我们想看到的。这时我们给button一个阻止事件传递的功能，点击删除按钮后，事件就会结束，就不再显示商品详情。
前端豆知识，很小却有用
在各种浏览器中存在三种事件模型:原始事件模型,DOM2事件模型,IE事件模型。
其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持.
原始事件模型：
在原始事件模型中(也有说DOM0级)，事件发生后没有传播的概念，没有事件流。北大青鸟http://www.kmbdqn.cn/认为事件发生，处理，结束，就这么简单。监听函数只是元素的一个属性值，通过指定元素的属性值来绑定监听器。书写方式有两种：
(1)HTML代码中指定属性值：
(2)在js代码中指定属性值：document.getElementsByTagName(‘input’)[0].onclick=func
优点：所有浏览器都兼容
缺点：
1.逻辑与显示没有分离
2.相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的
3.无法通过事件的冒泡、委托等机制。
DOM2事件模型
此模型是W3C制定的标准模型。W3C制定的事件模型中，一次事件的发生包含三个过程：
(1)事件捕获阶段。事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。
(2)事件处理阶段。事件到达目标元素,执行目标元素的事件处理函数.
(3)事件冒泡阶段。事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册了该事件的监听函数，有则执行。
所有的事件类型都会经历"事件捕获阶段"但是只有部分事件会经历"事件冒泡阶段"阶段,例如submit事件就不会被冒泡。
e.target与e.currentTarget是干什么的?
e.target获取当前实际触发事件节点，e.currentTarget获取获取当前监听节点。
11111
$('div').on('click',function(e){console.log(e.currentTarget)console.log(e.target)})
如果点击span的输出：
li对象
span对象
点击li的非span区域，输出
li对象
li对象
preventDefault与stopPropagation是干什么的
事件冒泡是一个从后代节点向祖先节点冒泡的过程，这个可以理解吧。
事件捕获就正好相反，是一个从祖先节点到后点节点的过程。
IE只支持冒泡，不支持捕获。
以标准浏览器为例：
<div id="d1"><div id="d2"></div>
</div>
<script>
//按下边的方法绑定事件，当点击d2的时候console的顺序是 d2 clicked，d1 clicked
//第三个参数是false，是绑定在冒泡阶段
document.getElementById('d1').addEventListener('click', function(){
console.log('d1 clicked')
}, false)
document.getElementById('d2').addEventListener('click', function(){
console.log('d2 clicked')
}, false)
//按下边的方法绑定事件，当点击d2的时候console的顺序是 d1 clicked，d2 clicked
//第三个参数是true，是绑定在捕获阶段
document.getElementById('d1').addEventListener('click', function(){
console.log('d1 clicked')
}, true)
document.getElementById('d2').addEventListener('click', function(){
console.log('d2 clicked')
}, true)
</script>
