JavaScript 委托事件

■知識點

    事件委托（delegate)也稱為事件托管或事件代理，簡單描述就是把目標節(jié)點的事件綁定到祖先節(jié)點上。這種簡單而優(yōu)雅的事件注冊方式基于：事件傳播過程中，逐層冒泡總能被祖先節(jié)點捕獲。

    這樣做的好處：優(yōu)化代碼，提升運行性能，真正把HTML和JavaScript分離，也能防止在動態(tài)添加或刪除節(jié)點過程中，注冊的事件丟失現(xiàn)象。

■實例設(shè)計

    下面的示例借助事件委托技巧，利用事件傳播機制，在列表框ill元素上綁定click事件，當事件傳播到父節(jié)點ul上時，捕獲click事件，然后在事件監(jiān)聽函數(shù)中檢測當前事件響應(yīng)節(jié)點類型，如果是li元素，則進一步執(zhí)行下面的代碼，否則跳出事件監(jiān)聽函數(shù)，結(jié)束響應(yīng)。

<button id="btn">添加列表項目</button>

<ul id="list">

    <li>列表項目l</li>

    <li>列表項目2</li>

    <li>列表項目3</li>

</ul>

<script>

var ul=document.getElementByld("list"); 

ul.addEventListener('click',function(e){

    var e = e || window.event;

    var target = e.target || e.srcElement;

    if(e.target&&e.target.nodeName.toUpperCase() =="LI"){ //判斷目標事件是否為li alert(e.target.innerHTML);

    }

},false); 

var i = 4;

var btn=document.getElementByld("btn");

btn.addEventListener("click",function(){

    var li = document.createElement("li");

    li. innerHTML ="列表項目"+ i++;

    ul.appendChild(li);

});

</script〉

    當頁面存在大量元素，并且每個元素注冊了一個或多個事件時，可能會影響性能。訪問和修改更多的DOM節(jié)點，程序就會更慢，特別是事件連接過程都發(fā)生在load (或DOMContentReady)事件中時，對任何一個交互網(wǎng)頁來說，這都是一個繁忙的時間段。另外，瀏覽器需要保存每個事件句柄的記錄，也

會占用更多內(nèi)存。