JS事件，你真的懂吗（捕获，冒泡）？
说到js事件大家肯定都知道，那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。那么问题来了，我们通常看到的事件都是直接触发之后就执行了，那么我们怎么才能看到事件的捕获和冒泡都是怎么进行的呢，这里给大家准备了一个例子
addEventListener()
例子之前首先给大家简单介绍一下addEventListener方法，从字面上的解释可以看到这种方法叫做添加事件监听者，就是以监听的形式来控制时间的触发
- 意义 addEventListener()可以监听事件的触发，来达到绑定事件的目的，他的原理是监听，当有事件触发的时候它就会做出相应的动作
参数
addEventListener(event,function,useCapture);
event：字符串，表示需要监听的事件，事件前面不用加on。例如：单击事件直接可以写成click。
function：回调函数，表示事件触发后要执行的函数。
useCapture：布尔值 true 或 false 不传的话默认为false 。true表示监听事件的捕获阶段，false表示监听事件的冒泡阶段。
- 返回值 没有返回值
示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#outer {
width: 100px;
height: 100px;
background-color: red;
}
#inner {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
outer.addEventListener("click",function(e){
console.log("outer捕获阶段");
},true);
outer.addEventListener("click",function(e){
console.log("outer冒泡阶段");
},false);
inner.addEventListener("click",function(e){
console.log("inner捕获阶段");
},true);
inner.addEventListener("click",function(e){
console.log("inner冒泡阶段");
},false);
</script>
</body>
</html>当我们点击篮框的时候，会发现终端打印出来如下图所示
首先是outer捕获阶段 其次是inner捕获阶段 然后是inner冒泡阶段 最后是outer冒泡阶段
由此我们可以看到，事件触发的时候实际上都是有捕获和冒泡阶段的，并且捕获阶段会从最外层的父级元素开始捕获，一直捕获到最后触发事件的那个元素点才会停止，那么冒泡阶段反之，会从最内层触发的那个元素开始往外层的父级元素一直冒泡。并且事件的触发是先捕获，在冒泡。
阻止事件冒泡
事件的冒泡会让我们实现某些功能的时候产生阻碍，那么我们怎么怎么阻止事件的冒泡呢，这个时候就会用到一个方法。
e.stopPropagation();
当我们吧这个方法放到inner冒泡阶段的下面的时候，神奇的事情发生了，当代码执行到这里，默认直接把冒泡的事件给阻止了，这时候会呈现出这个样子。
这样就成功的阻止了事件的冒泡，是不是很神奇，那么我们阻止事件冒泡还有别的方法吗，答案是肯定的，这时候就得了解一下我们的event对象了,我们打印一下event对象，如下：
打印发现当我们触发事件时，event对象里面默认会有一个target对象，这个target对象正好就是我们元素触发的节点，那么我们是不是可以通过判断
if(e.target == this){console.log("...")}
方法来判断触发的节点是不是当前我们点击的节点，就可以很巧妙的阻止事件的冒泡了。
应用场景举例
可能很多朋友感觉，这个东西我根本用不到啊，不会出现这种情况，我怎么会把父元素和子元素绑定相同的事件呢？ 我们在使用中多数情况下只使用冒泡监听。例如一条购物车信息，在这条信息中，右下角有一个删除按钮。点击这条消息可查看详情，点击删除按钮可将此商品移除。我们会分别给信息的div和删除button添加一个冒泡的click事件监听。如果不做阻止传递，点击删除button后，会显示商品详情。显然这不是我们想看到的。这时我们给button一个阻止事件传递的功能，点击删除按钮后，事件就会结束，就不再显示商品详情。
本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。