JavaScript 委托事件

■知識(shí)點(diǎn)

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

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

■實(shí)例設(shè)計(jì)

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

<button id="btn">添加列表項(xiàng)目</button>

<ul id="list">

    <li>列表項(xiàng)目l</li>

    <li>列表項(xiàng)目2</li>

    <li>列表項(xiàng)目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"){ //判斷目標(biāo)事件是否為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 ="列表項(xiàng)目"+ i++;

    ul.appendChild(li);

});

</script〉

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

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