Javascript事件模型系列（二）事件的捕獲-冒泡機制及事件委托機制

一、事件的捕獲與冒泡

   由W3C規定的DOM2標准中，一次事件的完整過程包括三步：捕獲→執行目標元素的監聽函數→冒泡，在捕獲和冒泡階段，會依次檢查途徑的每個節點，如果該節點注冊了相應的監聽函數，則執行監聽函數。以下面的HTML結構為例：

<div id="parentdiv">
       父親
       <div id="childdiv">孩子</div>
</div>

　　執行的流程應該是這樣的：

　　下面是一組例子，分別點擊孩子節點可以清楚的看到第三個參數的影響：

父親

孩子

父親節點的監聽函數在捕獲階段執行：
var parent1 = document.getElementById('parentdiv1');
var child1 = document.getElementById('childdiv1');
parent.addEventListener('click',function(){alert('父親被點擊了');},true);//第三個參數為true
child.addEventListener('click',function(){alert('孩子被點擊了');},false);

父親

孩子

父親節點的監聽函數在冒泡階段執行：
var parent2 = document.getElementById('parentdiv2');
var child2 = document.getElementById('childdiv2');
parent.addEventListener('click',function(){alert('父親被點擊了');},false);//第三個參數為false
child.addEventListener('click',function(){alert('孩子被點擊了');},false);

父親

孩子

父親節點的監聽函數在捕獲冒泡階段都執行：
var parent3 = document.getElementById('parentdiv3');
var child3 = document.getElementById('childdiv3');
parent.addEventListener('click',function(){alert('父親被點擊了');},true);//第三個參數為true
parent.addEventListener('click',function(){alert('父親被點擊了');},false);//第三個參數為false
child.addEventListener('click',function(){alert('孩子被點擊了');},false);

　　如果不想讓事件向上冒泡，可以在監聽函數中調用event.stopPrapagation()來完成，這樣父親節點就捕捉不到該事件了。在實際的開發中，這一用處還是挺多的。

二、事件委托機制

       知道了事件的捕獲冒泡機制，我們可以利用它來實現更方便的程序控制，事件委托便是最典型的應用之一。下面來說說javascript中的事件委托機制。什么叫委托呢？想想我們現實生活中，自己不想干的事，讓別人來幫忙完成，這就是把事情“委托”給別人。Javascript的事件委托機制也是這個道理，本來一個監聽函數要處理節點a觸發的事件，現在把這個監聽函數綁定到節點a的父層節點上，讓它的父輩來完成事件的監聽，這樣就把事情“委托”了過去。在父輩元素的監聽函數中，可通過event.target屬性拿到觸發事件的原始元素，然后再對其進行相關處理。

       那這樣做有什么好處呢？最大的用處便是監聽動態增加的元素。比如我們現在有這樣的需求，點擊下面每個列表項彈出各自的內容，現在隨着web應用的盛行，網頁中使用異步請求來動態加載節點已經變的很普遍，所以我們點擊下方的按鈕要在列表中增加一項，並且點擊新增加的節點也要彈出內容。HTML結構如下：

<ol id="olist">
    <li>列表內容1</li>
    <li>列表內容2</li>
    <li>列表內容3</li>
    <li>列表內容4</li>
    <li>列表內容5</li>
</ol>

　　若我們使用之前的監聽器綁定方式，需要遍歷所有的li元素並監聽，代碼應該是這樣的：

var listArray = document.getElementById('olist').childNodes;
for(var i=0;i<listArray.length;i++){
    listArray[i].addEventListener('click',function({
            alert(this.innerText);
        });
}

　　運行效果如下：

1. 列表內容1
2. 列表內容2
3. 列表內容3
4. 列表內容4
5. 列表內容5

　　可以發現當新增元素后，點擊它並沒有彈出內容。那是當然的了，因為我們並沒有給新增的元素綁定監聽器，為了實現點擊新增元素也彈出內容，我們不得不在每次新增一個元素后，再進行一次綁定。加一個綁一個，加一個綁一個，累不累啊！你不累瀏覽器都累了！這樣做導致的性能開銷是可想而知的，而且瀏覽器還要維系n多元素與應的監聽函數的映射關系，會占用大量內存。

       面對這樣拖沓冗雜的代碼，你是不是已經不能忍，想要高喊一聲：大地！快使用光能力量！好，接下來該秘密武器登場了，看看使用事件委托的效果，代碼如下：

var olist = document.getElementById('olist');
olist.addEventListener('click',function(){
    alert(event.target.innerText);
},false);

　　看看實際運行的效果：

1. 列表內容1
2. 列表內容2
3. 列表內容3
4. 列表內容4
5. 列表內容5

　　我們並未給li元素綁定任何監聽器，而是監聽它的父元素ul，等到事件冒泡上來的時候，在處理函數中通過event.target獲得觸發事件的li元素，進行相關處理。這樣做的好處是顯而易見的，首先只進行了一次監聽器的綁定，瀏覽器輕松，其次動態增加元素后你也不必要再綁定監聽器，你也輕松。正所謂大家好才是真的好！

       本篇的基本內容就介紹完了，你是不是感覺有點奇妙，我平時寫程序的時候沒關心這些也仍然能完成工作呀？那我就得問你是不是使用js框架，使用jQuery了，事實上，jQuery提供的on、live等方法就已經對事件委托進行了封裝，為委托機制的推廣悄悄做了底層貢獻，你沒感覺到而已。jQuery中的各種事件監聽方式也需要我們有一個清楚的了解，才能正確的使用，高效的完成工作。這些內容將放在下一篇介紹。