逆战班
每个事件发生的时候，都会有一个触发并执行的过程，也就是事件的传播过程，我们称之为事件流。
事件流有3个阶段：捕获阶段、目标阶段、冒泡阶段
如下代码既可以明确的表示这几个阶段具体的执行过程
```javascript
<body>
<style>
#big{
width: 200px;
height: 200px;
border:1px solid #000;
}
#middle{
width: 150px;
height: 150px;
background: #abcdef;
}
#small{
width: 100px;
height: 100px;
background: red;
}
</style>
<div id="big">
大盒子的内容
<div id="middle">
中盒子的内容
<div id="small">
小盒子的内容
</div>
</div>
</div>
</body>
<script>
document.getElementById("small").addEventListener("click",Click,true);
document.getElementById("middle").addEventListener("click",Click,true);
document.getElementById("big").addEventListener("click",Click,true);
function Click(){
console.log(this.innerText);
}
</script>
点击小盒子的时候，先触发大盒子的事件，再触发中盒子的事件，最后触发小盒子的事件。
#####事件捕获阶段：事件开始由顶层元素触发，然后逐级向下传播，直到目标元素，依次执行其身上绑定的事件。
#####事件目标阶段(处理阶段)：触发当前自身的事件。
#####事件冒泡阶段：事件由目标元素先接收，然后逐级向上传播，达到最顶层元素，依次执行其身上绑定的事件。
以下的原型图的表示的过程，就是事件在代码中的执行顺序
事件默认会冒泡。
特别注意：如果某个元素的事件(如单击事件)在捕获阶段被执行，则不会在冒泡阶段执行。即事件在只会在事件流的过程中执行一次。
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
