一、事件的捕獲與冒泡

?? 由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

列表內容2

列表內容3

列表內容4

列表內容5

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

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

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

　　看看實際運行的效果：

列表內容1

列表內容2

列表內容3

列表內容4

列表內容5

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

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

總結

以上是生活随笔為你收集整理的Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。