淺談事件冒泡與事件捕獲

時間 2019-11-08

原文原文鏈接

事件冒泡與事件捕獲

事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是爲了解決頁面中事件流（事件發生順序）的問題。javascript

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

上面的代碼當中一個div元素當中有一個p子元素，若是兩個元素都有一個click的處理函數，那麼咱們怎麼才能知道哪個函數會首先被觸發呢？html

爲了解決這個問題微軟和網景提出了兩種幾乎徹底相反的概念。java

事件冒泡

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

所以上面的例子在事件冒泡的概念下發生click事件的順序應該是p -> div -> body -> html -> document瀏覽器

事件捕獲

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

上面的例子在事件捕獲的概念下發生click事件的順序應該是document -> html -> body -> div -> pspa

addEventListener的第三個參數

「DOM2級事件」中規定的事件流同時支持了事件捕獲階段和事件冒泡階段，而做爲開發者，咱們能夠選擇事件處理函數在哪個階段被調用。設計

addEventListener方法用來爲一個特定的元素綁定一個事件處理函數，是JavaScript中的經常使用方法。addEventListener有三個參數：代理

element.addEventListener(event, function, useCapture)code

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

事件代理

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

<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;
        alert("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'){
            alert('The color is ' + x.innerHTML);
        }
    }
})();

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