## 事件流：事件冒泡和事件捕獲
###? 1. 兩者概念
- **事件捕獲**指的是從document到觸發(fā)事件的那個節(jié)點，即*自上而下*的去觸發(fā)事件。，
? ```javascript
? element.addEventListener(event,function(),false);
? ```
- **事件冒泡**是*自下而上*的去觸發(fā)事件。綁定事件方法的第三個參數(shù)，就是控制事件觸發(fā)順序是否為事件捕獲。
? ```javascript
? element.addEventListener(event,function(),true);
? ```
- 從上面可知，第三個參數(shù)為`true`或者`false`;
? -? `true`,事件捕獲；
? -? `false`,事件冒泡。
? -? 默認(rèn)`false`,即事件冒泡。
- Jquery的`e.stopPropagation`會阻止冒泡，意思就是到我為止，我的爹和祖宗的事件就不要觸發(fā)了。
### 2. 案例分析
這是HTML結(jié)構(gòu)：一個父級容器中套著一個子集容器
```html
<div class="parent">
? ? <div class="child"></div>
</div>
```
接下來給它們綁定上事件：
```javascript
document.querySelector(".parent").addEventListener("click",function(e){
? ? ? ? alert("parent事件被觸發(fā)，"+this.id);
? ? })
? ? document.querySelector(".child").addEventListener("click",function(e){
? ? ? ? alert("child事件被觸發(fā)，"+this.id)
? ? })
```
擴(kuò)展：
- `querySelector()` 方法返回文檔中匹配指定 CSS 選擇器的一個元素;
? 只會返回第一個符合要求的。比如兩個`class="parent"`;
? `document.querySelector('.parent')`只會查詢第一個符合要求的。
- `querySelectorAll()` 方法返回文檔中匹配指定 CSS 選擇器的所有元素；
? `document.querySelectorAll('.parent')[0]` 獲取的是第一個符合`class = "parent"`的元素節(jié)點。
? `document.querySelectorAll('.parent')[1]` 獲取的是第二個符合`class = "parent"`的元素節(jié)點。
結(jié)果：
? ? child事件被觸發(fā)，child
? ? parent事件被觸發(fā)，parent
結(jié)論：先child，然后parent。事件的觸發(fā)順序自內(nèi)向外，這就是**事件冒泡。**
**現(xiàn)在改變第三個參數(shù)的值為true**
```javascript
? document.querySelectorAll(".parent")[1].addEventListener("click",function(e){
? ? ? ? alert("parent事件被觸發(fā)，"+this.id);
? ? },true)
? ? document.querySelectorAll(".child")[1].addEventListener("click",function(e){
? ? ? ? alert("child事件被觸發(fā)，"+this.id)
? ? },true)
```
結(jié)果：
? ? parent事件被觸發(fā)，parent
? ? child事件被觸發(fā)，child
結(jié)論：先parent,然后child。事件觸發(fā)順序變更為自外向內(nèi)，這就是**事件捕獲。**
### 3. 演示
### 4. 應(yīng)用案例
```html
? ? ? <ul>
? ? ? ? ? ? <li>item1</li>
? ? ? ? ? ? <li>item2</li>
? ? ? ? ? ? <li>item3</li>
? ? ? ? ? ? <li>item4</li>
? ? ? ? ? ? <li>item5</li>
? ? ? ? ? ? <li>item6</li>
? ? ? ? </ul>
```
需求是這樣的：鼠標(biāo)放到li上對應(yīng)的li背景變灰。
利用事件冒泡實現(xiàn)：
```javascript
$("ul").on("mouseover",function(e){
? ? $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
? })
```
也許有人會說，我們直接給所有l(wèi)i都綁上事件也可以啊，一點也不麻煩，只要……
```javascript
$("li").on("mouseover",function(){
? ? ? ? ? ? ? ? $(this).css("background-color","#ddd").siblings().css("background-color","white");
? ? ? ? ? ? })
```
是，這樣也行。而且從代碼簡潔程度上，兩者是相若仿佛的。但是，前者少了一個遍歷所有l(wèi)i節(jié)點的操作，所以在性能上肯定是更優(yōu)的。
還有就是，如果我們在綁定事件完成后，頁面又動態(tài)的加載了一些元素……
```javascript
$("ul").append("<li>item</li>");
```
這時候，**第二種方案，由于綁定事件的時候`li`還不存在，所以當(dāng)新添加li時候，效果不起作用（新的`li`未綁定事件）。所以為了效果，我們還要給它再綁定一次事件。**
### 5. 完整代碼
```html
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>事件冒泡和事件捕獲</title>
? ? <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
? ? <style>
? ? ? ? .parent{
? ? ? ? ? ? border: 1px solid red ;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? width: 200px;
? ? ? ? }
? ? ? ? .child{
? ? ? ? ? ? background-color: #e7ff69;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? margin-top: 50px;
? ? ? ? }
? ? </style>
</head>
<body>
<hr>
<h3>1.事件冒泡：從內(nèi)向外;第三個參數(shù)為false(默認(rèn)值)</h3>
<hr>
<div class="parent">
? ? <div class="child"></div>
</div>
<hr>
<h3>2.事件捕獲：從外向內(nèi)：第三個參數(shù)為true</h3>
<hr>
<div class="parent">
? ? <div class="child"></div>
</div>
<br>
<br>
<hr>
<h3>3.應(yīng)用案例</h3>
<hr>
<input type="button" value="添加一個li" id="btn">
<ul>
? ? <li>item1</li>
? ? <li>item2</li>
? ? <li>item3</li>
? ? <li>item4</li>
? ? <li>item5</li>
? ? <li>item6</li>
</ul>
<script>
? ? document.querySelector(".parent").addEventListener("click",function(e){
? ? ? ? alert("parent事件被觸發(fā)，"+this.id);
? ? })
? ? document.querySelector(".child").addEventListener("click",function(e){
? ? ? ? alert("child事件被觸發(fā)，"+this.id)
? ? })
? ? document.querySelectorAll(".parent")[1].addEventListener("click",function(e){
? ? ? ? alert("parent事件被觸發(fā)，"+this.id);
? ? },true)
? ? document.querySelectorAll(".child")[1].addEventListener("click",function(e){
? ? ? ? alert("child事件被觸發(fā)，"+this.id)
? ? },true)
? ? $("#btn").click(function () {
? ? ? ? $("ul").append("<li>item</li>");
? ? });
? ? /*//僅僅對li簡單的綁定事件會使得添加了新的li時候，得重新給他綁定上事件，否則不起作用。下面方法不好
? ? $("li").on("mouseover",function(){
? ? ? ? $(this).css("background-color","#ddd").siblings().css("background-color","white");
? ? })*/
? ? //利用事件冒泡實現(xiàn)
? ? $("ul").on("mouseover",function(e){
? ? ? ? $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
? ? })
</script>
</body>
</html>
```
