## 事件流：事件冒泡和事件捕获
### 1. 两者概念
- **事件捕获**指的是从document到触发事件的那个节点，即*自上而下*的去触发事件。，
```javascript
element.addEventListener(event,function(),false);
```
- **事件冒泡**是*自下而上*的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。
```javascript
element.addEventListener(event,function(),true);
```
- 从上面可知，第三个参数为`true`或者`false`;
- `true`,事件捕获；
- `false`,事件冒泡。
- 默认`false`,即事件冒泡。
- Jquery的`e.stopPropagation`会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。
### 2. 案例分析
这是HTML结构：一个父级容器中套着一个子集容器
```html
```
接下来给它们绑定上事件：
```javascript
document.querySelector(".parent").addEventListener("click",function(e){
alert("parent事件被触发，"+this.id);
})
document.querySelector(".child").addEventListener("click",function(e){
alert("child事件被触发，"+this.id)
})
```
扩展：
- `querySelector()` 方法返回文档中匹配指定 CSS 选择器的一个元素;
只会返回第一个符合要求的。比如两个`class="parent"`;
`document.querySelector('.parent')`只会查询第一个符合要求的。
- `querySelectorAll()` 方法返回文档中匹配指定 CSS 选择器的所有元素；
`document.querySelectorAll('.parent')[0]` 获取的是第一个符合`class = "parent"`的元素节点。
`document.querySelectorAll('.parent')[1]` 获取的是第二个符合`class = "parent"`的元素节点。
结果：
child事件被触发，child
parent事件被触发，parent
结论：先child，然后parent。事件的触发顺序自内向外，这就是**事件冒泡。**
**现在改变第三个参数的值为true**
```javascript
document.querySelectorAll(".parent")[1].addEventListener("click",function(e){
alert("parent事件被触发，"+this.id);
},true)
document.querySelectorAll(".child")[1].addEventListener("click",function(e){
alert("child事件被触发，"+this.id)
},true)
```
结果：
parent事件被触发，parent
child事件被触发，child
结论：先parent,然后child。事件触发顺序变更为自外向内，这就是**事件捕获。**
### 3. 演示
### 4. 应用案例
```html
- item1
- item2
- item3
- item4
- item5
- item6
```
需求是这样的：鼠标放到li上对应的li背景变灰。
利用事件冒泡实现：
```javascript
$("ul").on("mouseover",function(e){
$(e.target).css("background-color","#ddd").siblings().css("background-color","white");
})
```
也许有人会说，我们直接给所有li都绑上事件也可以啊，一点也不麻烦，只要……
```javascript
$("li").on("mouseover",function(){
$(this).css("background-color","#ddd").siblings().css("background-color","white");
})
```
是，这样也行。而且从代码简洁程度上，两者是相若仿佛的。但是，前者少了一个遍历所有li节点的操作，所以在性能上肯定是更优的。
还有就是，如果我们在绑定事件完成后，页面又动态的加载了一些元素……
```javascript
$("ul").append("
```
这时候，**第二种方案，由于绑定事件的时候`li`还不存在，所以当新添加li时候，效果不起作用（新的`li`未绑定事件）。所以为了效果，我们还要给它再绑定一次事件。**
### 5. 完整代码
```html
1.事件冒泡：从内向外;第三个参数为false(默认值)
2.事件捕获：从外向内：第三个参数为true
3.应用案例
- item1
- item2
- item3
- item4
- item5
- item6
```