JavaScript 委托事件
■知識(shí)點(diǎn)
事件委托(delegate)也稱為事件托管或事件代理,簡(jiǎn)單描述就是把目標(biāo)節(jié)點(diǎn)的事件綁定到祖先節(jié)點(diǎn)上。這種簡(jiǎn)單而優(yōu)雅的事件注冊(cè)方式基于:事件傳播過程中,逐層冒泡總能被祖先節(jié)點(diǎn)捕獲。
這樣做的好處:優(yōu)化代碼,提升運(yùn)行性能,真正把HTML和JavaScript分離,也能防止在動(dòng)態(tài)添加或刪除節(jié)點(diǎn)過程中,注冊(cè)的事件丟失現(xiàn)象。
■實(shí)例設(shè)計(jì)
下面的示例借助事件委托技巧,利用事件傳播機(jī)制,在列表框ill元素上綁定click事件,當(dāng)事件傳播到父節(jié)點(diǎn)ul上時(shí),捕獲click事件,然后在事件監(jiān)聽函數(shù)中檢測(cè)當(dāng)前事件響應(yīng)節(jié)點(diǎn)類型,如果是li元素,則進(jìn)一步執(zhí)行下面的代碼,否則跳出事件監(jiān)聽函數(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)頁面存在大量元素,并且每個(gè)元素注冊(cè)了一個(gè)或多個(gè)事件時(shí),可能會(huì)影響性能。訪問和修改更多的DOM節(jié)點(diǎn),程序就會(huì)更慢,特別是事件連接過程都發(fā)生在load (或DOMContentReady)事件中時(shí),對(duì)任何一個(gè)交互網(wǎng)頁來說,這都是一個(gè)繁忙的時(shí)間段。另外,瀏覽器需要保存每個(gè)事件句柄的記錄,也
會(huì)占用更多內(nèi)存。
點(diǎn)擊加載更多評(píng)論>>