JavaScript------事件委託（event delegation）

標籤：相容性   nbsp   ref   上層   add   cli   pre   eve   影響   

簡單的說，事件委託（event delegation)是在DOM上層（也就是在觸發事件的元素的父元素上）定義事件的處理常式，而不是定義在觸發事件的元素本身上。

  首先我們來舉這樣一個例子：我有N個li元素，我想讓點擊過的li元素背景顏色都變為黃色。非常簡單的一個例子是吧？

  我們可以通過如下代碼實現：

var oBox = document.getElementById(‘box‘);
var aLi = oBox.children;
for(var i=0;i<aLi.length;i++){
    addEvent(aLi[i],‘click‘,function(){
        this.style.background=‘yellow‘;
    })
}
 首先這樣寫是沒有問題的，效果完全可以實現，但是如果我有上百個Li元素呢？那我可能就需要為這上百個元素添加相同的處理常式，而且，這上百個程式做的是同一件事情。毋庸置疑，這勢必會影響效能。
再者說，如果我想為不同的li元素設定不同的的處理常式，也就是說，當每個li元素被點擊時，會有各自不同的事件發生。那你的處理方法是否需要給每個li添加事件監聽？同樣，如果我有上百個li元素的
時候，你是不是要對每個li進行擷取，然後添加事件？如果是，那將是多麼可怕的一件事情！

那麼我們有沒有其他理想的處理方式呢？有，那就是事件委託。
 
所謂事件委託，其實就是我們利用瀏覽器提供的事件冒泡來處理為所有的子項目的添加的事件。當子項目的事件冒泡到父元素上時，我們通過event.target（不相容IE8以下版本）或者
event.srcElement(不相容Firefox)來擷取當前被點擊元素的引用，這樣，我們就可以像如下代碼一樣，將事件溫和的委託給li的父元素也就是ul了：

var oBox = document.getElementById(‘box‘);
var aLi = oBox.children;
oBox.onclick = function(ev){
    var oEvent = ev || event;
    var oTarget = oEvent.target || oEvent.srcElement;//解決瀏覽器的相容性問題
    if(oTarget.tagName == ‘LI‘){
/*此處的‘LI‘是需要大寫的，若要小寫可將if內的判斷條件改為（oTarget.tagName.toLowerCase == ‘li‘）*/
        oTarget.style.background = ‘yellow‘;
    }
}
至此，最簡單的事件委託舉例就完成了~
（以下是摘自JavaScript忍者秘籍，給大家進行下專業性的總結~）
事件委託是一種開發更高效能，且可伸縮Web應用程式的最好技術。
因為事件冒泡（bubbling）是唯一一種在所有瀏覽器中都可以使用的技術（事件捕獲（capturing）在IE9之前版本不可用），所以重要的是要確保將委託應用到事件目標元素的祖先元素上。這樣才能
確保最終冒泡到所委託的元素上。
可惜的是，在很多瀏覽器中，submit、change、focus和blur事件的冒泡實現都有很嚴重的問題。比如在老版的IE瀏覽器中，submit和change事件根本沒有冒泡，而相容W3C DOM的瀏覽器對兩個事件
都實現了冒泡。所以，如果我們使用事件委託，必須解決如何克服這些缺陷問題。大家都知道，相容性問題是最頭疼的一項任務，所以不是一兩句話可以說的清的，在以後的學習中再慢慢跟大家交流吧~

作為一前端個新人，也是初次寫部落格，肯定會有很多分析不到位的地方，小妹先提前謝謝各位前輩的批評指正。天色已晚，祝大家晚安~

JavaScript------事件委託（event delegation）