事件传播过程
事件流
事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？目前主要有三种模型
事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
这种分歧在日常生活中也很常见，举个例子，某个地方出了抢劫事件，我们有多种处理方式
村里先发现，报告给乡里，乡里报告到县城，县城报告给市里。。。。
市里先知道这事儿，然后交代给县城怎么处理，县城交给到乡里处理，乡里交给村里处理
-
事件冒泡模型
image -
事件捕获模型
image -
DOM事件流
image
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box1{
width:300px;
height:300px;
border:1px solid;
border-radius:150px;
background:red;
}
.box2{
width:200px;
height:200px;
border:1px solid;
margin-top:50px;
margin-left:50px;
border-radius:100px;
background:blue;
}
.box3{
width:100px;
height:100px;
border:1px solid;
margin-top:50px;
margin-left:50px;
border-radius:50px;
background:green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
<script>
var box1 = document.querySelector('.box1')
var box2 = document.querySelector('.box2')
var box3 = document.querySelector('.box3')
box1.addEventListener('click',function(){
console.log("click .box1.. 红色")
},true)
box2.addEventListener('click',function(){
console.log("click .box2.. 蓝色")
},true)
box3.addEventListener('click',function(){
console.log("click .box3.. 绿色")
},true)
box1.addEventListener('click',function(){
console.log("click .box1.. 红色")
},false)
box2.addEventListener('click',function(){
console.log("click .box2.. 蓝色")
},false)
box3.addEventListener('click',function(){
console.log("click .box3.. 绿色")
},false)
</script>
</body>
</html>
通过点击box3，会输出
image
通过输出的内容我们可以清楚的看出事件的传播过程。
true是时间冒泡 , false为事件捕获
阻止传播
stopPropagation()取消事件进一步捕获或冒泡
定义和用法
不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点
通过上个示例，我们给box3事件中添加stopPropagation()方法
//在box3后面添加box4更方便观察 设置成黄色
box3.addEventListener('click',function(e) {}
console.log("click .box3.. 绿色")
e.stopPropagation()
)
效果:
image
可以清除的看到事件传播到box3后，就不再执行后面的事件
注意 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开.
