一個(gè)事件的處理過程主要有三個(gè)階段：捕獲、目標(biāo)、冒泡。

• 捕獲階段：當(dāng)我們?cè)?DOM 樹的某個(gè)節(jié)點(diǎn)發(fā)生了一些操作（例如單擊、鼠標(biāo)移動(dòng)上去），就會(huì)有一個(gè)事件發(fā)射過去。這個(gè)事件從 Window 發(fā)出，不斷經(jīng)過下級(jí)節(jié)點(diǎn)直到觸發(fā)的目標(biāo)節(jié)點(diǎn)。在到達(dá)目標(biāo)節(jié)點(diǎn)之前的過程，就是捕獲階段（Capture Phase）。（所有經(jīng)過的節(jié)點(diǎn)，都會(huì)觸發(fā)這個(gè)事件。捕獲階段的任務(wù)就是建立這個(gè)事件傳遞路線，以便后面冒泡階段順著這條路線返回 Window。）
• 目標(biāo)階段：當(dāng)事件不斷的傳遞直到目標(biāo)節(jié)點(diǎn)的時(shí)候，最終在目標(biāo)節(jié)點(diǎn)上觸發(fā)這個(gè)事件，就是目標(biāo)階段。
• 冒泡階段：事件冒泡即事件開始時(shí)，由最具體的元素接收（也就是事件發(fā)生所在的節(jié)點(diǎn)），然后逐級(jí)傳播到較為不具體的節(jié)點(diǎn)（我們平時(shí)用的事件綁定就是利用的事件冒泡的原理）

• 事件捕獲: 事件捕獲指的是從document到觸發(fā)事件的那個(gè)節(jié)點(diǎn)，即自上而下的去觸發(fā)事件。
• 事件冒泡：事件冒泡剛好相反，是從觸發(fā)事件的那個(gè)節(jié)點(diǎn)一直到document，是自下而上的去觸發(fā)事件。
• 事件委托：利用了事件冒泡的原理，在下方通過實(shí)例講解
• 阻止事件委托和冒泡：在事件函數(shù)中執(zhí)行event.stopPropagation()

實(shí)例講解：

參考鏈接

<div id="parent">
　　<div id="child" class="child"></div>
</div>

<script type="text/javascript">
       document.getElementById("parent").addEventListener("click",function(e){
            console.log("parent事件被觸發(fā)，"+this.id);
        });
        document.getElementById("child").addEventListener("click",function(e){
            console.log("child事件被觸發(fā)，"+this.id);
        });
</script>

上述代碼都是采用的事件冒泡機(jī)制：

• 點(diǎn)擊孩子元素，先孩子元素再父親元素

  
  
  image.png

• 點(diǎn)擊父親元素

  
  
  image.png

<script type="text/javascript">
       document.getElementById("parent").addEventListener("click",function(e){
            console.log("parent事件被觸發(fā)，"+this.id);
        },true);
        document.getElementById("child").addEventListener("click",function(e){
            console.log("child事件被觸發(fā)，"+this.id);
        },true);
</script>

上述代碼都是采用的事件捕獲機(jī)制：

• 點(diǎn)擊孩子元素，先父親元素再孩子元素

  
  
  image.png

• 點(diǎn)擊父親元素

  
  
  image.png

事件委托

當(dāng)有多個(gè)類似的元素需要綁定事件時(shí)，一個(gè)一個(gè)去綁定即浪費(fèi)時(shí)間，又不利于性能，這時(shí)候就可以用到事件委托，給他們的一個(gè)共同父級(jí)元素添加一個(gè)事件函數(shù)去處理他們所有的事件情況.

<ul id="1ist">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

document.getElementById('1ist').addEventListener('click',function(e){
  e.target.innerHTML = "被點(diǎn)擊";
});

上述代碼才用事件委托機(jī)制，雖然我們沒有給每個(gè)li綁定事件,我們綁定事件的時(shí)候是采用的默認(rèn)的冒泡，所以可以理解為點(diǎn)擊之后冒泡執(zhí)行的；

• 點(diǎn)擊li元素

  
  
  image.png