JS中事件冒泡與捕獲

事件冒泡與事件捕獲

事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是爲了解決頁面中事件流（事件發生順序）的問題。
考慮下面這段代碼，就不寫html->head,body之類的代碼了，自行腦補

<div id="outer">
    <p id="inner">Click me!</p>
</div>

上面的代碼當中一個div元素當中有一個p子元素，若是兩個元素都有一個click的處理函數，那麼咱們怎麼才能知道哪個函數會首先被觸發呢？
爲了解決這個問題微軟和網景提出了兩種幾乎徹底相反的概念。

事件冒泡

微軟提出了名爲事件冒泡(event bubbling)的事件流。事件冒泡能夠形象地比喻爲把一顆石頭投入水中，泡泡會一直從水底冒出水面。也就是說，事件會從最內層的元素開始發生，一直向上傳播，直到document對象。

所以在事件冒泡的概念下在p元素上發生click事件的順序應該是p -> div -> body -> html -> document

事件捕獲

網景提出另外一種事件流名爲事件捕獲(event capturing)。與事件冒泡相反，事件會從最外層開始發生，直到最具體的元素。

所以在事件捕獲的概念下在p元素上發生click事件的順序應該是document -> html -> body -> div -> p

addEventListener的第三個參數

網景 和 微軟 曾經的戰爭仍是比較火熱的，當時， 網景主張捕獲方式，微軟主張冒泡方式。後來 w3c 採用折中的方式，平息了戰火，制定了統一的標準——先捕獲再冒泡。
addEventListener的第三個參數就是爲冒泡和捕獲準備的.
addEventListener有三個參數：

element.addEventListener(event, function, useCapture)

第一個參數是須要綁定的事件
第二個參數是觸發事件後要執行的函數
第三個參數默認值是false，表示在事件冒泡階段調用事件處理函數;若是參數爲true，則表示在事件捕獲階段調用處理函數。

冒泡的案例

<div id="s1">s1
    <div id="s2">s2</div>
</div>
<script>
    s1.addEventListener("click",function(e){
        console.log("s1 冒泡事件");
    },false);
    s2.addEventListener("click",function(e){
        console.log("s2 冒泡事件");
    },false);
</script>

當咱們點擊s2的時候，執行結果以下：

http://runjs.cn/detail/kj4jgpli

捕獲的案例

<div id="s1">s1
    <div id="s2">s2</div>
</div>
<script>
    s1.addEventListener("click",function(e){
        console.log("s1 捕獲事件");
    },true);
    s2.addEventListener("click",function(e){
        console.log("s2 捕獲事件");
    },true);
</script>

當咱們點擊s2的時候，執行結果以下：

http://runjs.cn/detail/c3mjulm0

事件捕獲vs事件冒泡

當事件捕獲和事件冒泡一塊兒存在的狀況，事件又是如何觸發呢。
這裏記被點擊的DOM節點爲target節點

1. document 往 target節點，捕獲前進，遇到註冊的捕獲事件當即觸發執行

2. 到達target節點，觸發事件（對於target節點上，是先捕獲仍是先冒泡則捕獲事件和冒泡事件的註冊順序，先註冊先執行）

3. target節點 往 document 方向，冒泡前進，遇到註冊的冒泡事件當即觸發

總結下就是:

• 對於非target節點則先執行捕獲在執行冒泡

• 對於target節點則是先執行先註冊的事件，不管冒泡仍是捕獲

<div id="s1">s1
    <div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
        console.log("s1 冒泡事件");         
},false);
s2.addEventListener("click",function(e){
        console.log("s2 冒泡事件");
},false);
        
s1.addEventListener("click",function(e){
        console.log("s1 捕獲事件");
},true);
        
s2.addEventListener("click",function(e){
        console.log("s2 捕獲事件");
},true);
</script>

當咱們點擊s2的時候,執行結果以下：

http://runjs.cn/detail/fkq3uyqh

這裏大致分析下執行結果
點擊s2，click事件從document->html->body->s1->s2(捕獲前進)
這裏在s1上發現了捕獲註冊事件，則輸出"s1 捕獲事件"
到達s2，已經到達目的節點，
s2上註冊了冒泡和捕獲事件，先註冊的冒泡後註冊的捕獲，則先執行冒泡，輸出"s2 冒泡事件"
再在s2上執行後註冊的事件，即捕獲事件，輸出"s2 捕獲事件"
下面進入冒泡階段，按照s2->s1->body->html->documen(冒泡前進)
在s1上發現了冒泡事件，則輸出"s1 冒泡事件"

事件冒泡與事件捕獲應用:事件代理

在實際的開發當中，利用事件流的特性，咱們可使用一種叫作事件代理的方法。

<ul id="color-list">
    <li>red</li>
    <li>yellow</li>
    <li>blue</li>
    <li>green</li>
    <li>black</li>
    <li>white</li>
</ul>

若是點擊頁面中的li元素，而後輸出li當中的顏色，咱們一般會這樣寫:

(function(){
    var color_list = document.getElementById('color-list');
    var colors = color_list.getElementsByTagName('li');
    for(var i=0;i<colors.length;i++){                          
        colors[i].addEventListener('click',showColor,false);
    };
    function showColor(e){
        var x = e.target;
        console.log("The color is " + x.innerHTML);
    };
})();

利用事件流的特性，咱們只綁定一個事件處理函數也能夠完成：

(function(){
    var color_list = document.getElementById('color-list');
    color_list.addEventListener('click',showColor,false);
    function showColor(e){
        var x = e.target;
        if(x.nodeName.toLowerCase() === 'li'){
            console.log('The color is ' + x.innerHTML);
        }
    }
})();

http://runjs.cn/detail/pvsbglwc

使用事件代理的好處不只在於將多個事件處理函數減爲一個，並且對於不一樣的元素能夠有不一樣的處理方法。假如上述列表元素當中添加了其餘的元素（如：a、span等），咱們沒必要再一次循環給每個元素綁定事件，直接修改事件代理的事件處理函數便可。

冒泡仍是捕獲？

對於事件代理來講，在事件捕獲或者事件冒泡階段處理並無明顯的優劣之分，可是因爲事件冒泡的事件流模型被全部主流的瀏覽器兼容，從兼容性角度來講仍是建議你們使用事件冒泡模型。

IE瀏覽器兼容

IE瀏覽器對addEventListener兼容性並不算太好，只有IE9以上可使用。

要兼容舊版本的IE瀏覽器，可使用IE的attachEvent函數

object.attachEvent(event, function)

兩個參數與addEventListener類似，分別是事件和處理函數，默認是事件冒泡階段調用處理函數，要注意的是，寫事件名時候要加上"on"前綴（"onload"、"onclick"等）。