前半部分，事件从最外面的父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一个阻止事件传递的功能，点击删除按钮后，事件就会结束，就不再显示商品详情。
前端豆知识，很小却有用
事件冒泡是一个从后代节点向祖先节点冒泡的过程，这个可以理解吧。
事件捕获就正好相反，是一个从祖先节点到后点节点的过程。
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>
浏览器中对事件的处理机制默认为事件冒泡，例如
<div id='div1'><div id='div2'><div id='div3'></div></div></div>
#div1{ width: 500pxheight: 500px background: rgb(12,42,31)}#div2{ width: 450pxheight: 450px background: rgb(212,142,1)}#div3{ width: 350pxheight: 350px background: rgb(1,242,153)}
绑定click事件：
div1.onclick=function(){ alert("div1")}div2.onclick=function(){ alert("div2")}div3.onclick=function(){ alert("div3")}
此时，当单击中间的div3时，先后弹出div3, div2, div1，此为事件冒泡的过程。利用addEventListener可以设置事件处理机制为捕获还是冒泡：
div1.addEventListener('click',function(obj){ alert("div1")},true)//如果未false则为事件冒泡，不填的话，默认falsediv2.addEventListener('click',function(obj){ alert("div2")},true)div3.addEventListener('click',function(obj){ alert("div3")},true)
这里将第三个参数设为true，指定事件处理机制为事件捕获。此时再次单击div3时，会依次弹出div1, div2, div3，与之前的相反。
而IE中只有事件冒泡，且没有addEventListener事件，取而代之的是attachEvent。
但是有时候，我们不喜欢出现事件冒泡或者捕获，希望单击div3时，只弹出div3。这时就要用到下面阻止事件冒泡的方法。
1. 阻止冒泡事件
主要是用于阻止事件传播。阻止它被分派到其他的DOM节点上，在事件传播的任何阶段都能使用。使用方法如下（兼容IE）：
function stopBubble(event){ if(window.event){//兼容IE window.event.cancelBubble=true }else{ event.stopPropagation() }
2. 阻止默认事件
像submit这类的表单元素，都会绑定默认事件，如果不阻止默认事件，则绑定的其他方法也会无效。使用方法如下（兼容IE）：
function stopDefaultEvent(event){ if(window.event){//兼容IE window.event.returnValue=false }else{ event.preventDefault() } return false}
