位置:首頁 > 軟件操作教程 > 編程開發(fā) > JavaScript > 問題詳情

JavaScript 委托事件

提問人:劉團(tuán)圓發(fā)布時(shí)間:2020-11-27

■知識(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)存。

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部