0.前言
今天来和大家分享一下和为事件流，说真的，对这一个知识点也不太熟悉，之鞥和大家分享我自己的见解，如果有误没希望大家多多包涵！！！ :-D
1.什么是事件流
以前写项目时，就会出现当我们点击某个控件，产生某种效果，其他的空间不会发生变化，但是很不巧的是，这个空间发生变化时，其他的空间也发生了变化，这就让人很无语了。这就是事件流在影响。见图：
事件流的概念.png
咕~~(╯﹏╰)b，好官方啊，看不懂，不过没关系，就是让大家了解一些即可，记不住就算了。
事件流的结构
事件流.png
从图中可以看到事件流分为三个部分：事件捕获阶段、出于目标阶段、事件冒泡阶段。
事件捕获阶段是从最外面的文档节点开始一级一级往里面传递，就是说当点击最外面一层的时候，它会影响到他的子节点；
事件冒泡阶段是从里面的子节点一级一级向祖先节点传递，影响到外面的节点。
处于目标阶段就是负责一个循环。
2.验证事件流
说了这么多，可能大家还不算太明白，那么我们就用代码来验证一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证事件流</title>
</head>
<body>
<div id="box1" style="width: 300px;height: 300px;background-color: red">
<div id="box2" style="width: 200px;height: 200px;background-color: green">
<div id=box3 style="width: 100px;height: 100px;background-color: yellow">
</div>
</div>
</div>
<script type="text/javascript">
var jsDivBox1 = document.getElementById("box1");
var jsDivBox2 = document.getElementById("box2");
var jsDivBox3 = document.getElementById("box3");
</script>
</body>
</html>
运行效果：
捕获.PNG
（1）给jsDivBox1添加事件监听
jsDivBox1.addEventListener("click", func, true);
function func() {
console.log(this);
}
效果：
捕获.PNG
可以看到，控制台从最外面一次打印到最里面一层，这是捕获阶段。如果将事件监听的第三个参数改为false，
jsDivBox1.addEventListener("click", func, false);
结果为:
捕获.PNG
从内容看到，结果没变，这是因为jsDivBox1外面没有了，所以会往里传递。
（2）给jsDivBox2添加事件监听
jsDivBox2.addEventListener("click", func, false);
点击该div时运行的效果：
捕获.PNG
可以看到是从jsDivBox2开始打印带里面一层，他还同时影响最外面一层，是冒泡阶段。
第三个div就不演示了，自己打印看看结果。
总结：true --捕获事件 false --冒泡事件
3.阻止冒泡、阻止默认行为
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止冒泡、阻止默认行为</title>
<style type="text/css">
#box{
width: 100px;height: 100px;background-color: red
}
</style>
</head>
<body style="height: 3000px">
<div id="box"></div>
<input type="text" name="in" id="put" />
<a href="red.html" id="link">点我跳转</a>
<script type="text/javascript" src="sunckBase.js"></script>
<script type="text/javascript">
var jsDiv = document.getElementById("box");
var jsInp = document.getElementById("put");
var jsA = document.getElementById("link");
document.body.onclick = function(e) {
var evt = e || window.event;
console.log(evt);
document.body.style.backgroundColor = randomColor();
//取消冒泡
evt.stopPropagation();
};
jsDiv.onclick = function(e) {
var evt = e || window.event;
console.log(evt);
this.style.backgroundColor = randomColor();
//取消冒泡
evt.stopPropagation();
};
jsInp.onfocus = function(){
console.log("聚焦");
};
jsInp.onclick = function(e) {
var evt = e || window.event;
//取消冒泡
evt.stopPropagation();
};
//取消默认行为
jsA.onclick = function(e) {
var evt = e || window.event;
//取消冒泡
evt.stopPropagation();
//prompt输入框
//alert警告框
//提示框
var flag = confirm("链接的网站可能存在病毒，是否确认跳转");
// console.log(flag);
// 确定-true;
// 取消-false
if (!flag) {
evt.preventDefault();
}
};
</script>
</body>
</html>
运行的结果是无论点击那个空间，外面的空间不会受到影响，如果把
//取消冒泡
evt.stopPropagation();
注释掉，会发现点击控件时外面的空间也会受到影响。
4.总结：
好累啊，这一篇说的不好，还希望大家能够多多谅解，谢谢
