在javascript中，事件委托也稱為事件托管或事件代理，就是把目標(biāo)節(jié)點(diǎn)的事件綁定到祖先節(jié)點(diǎn)上；它是利用事件冒泡原理，管理某一類型的所有事件，利用父元素來代表子元素的某一類型事件的處理方式。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

在 JavaScript 中，事件委托（delegate）也稱為事件托管或事件代理，是利用事件冒泡原理，管理某一類型的所有事件，利用父元素來代表子元素的某一類型事件的處理方式。

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

示例1

下面示例使用一般方法為列表結(jié)構(gòu)中每個(gè)列表項(xiàng)目綁定 click 事件，單擊列表項(xiàng)目，將彈出提示對話框，提示當(dāng)前節(jié)點(diǎn)包含的文本信息。但是，當(dāng)我們?yōu)榱斜砜騽?dòng)態(tài)添加列表項(xiàng)目之后，新添加的列表項(xiàng)目沒有綁定 click 事件，這與我們的愿望相反。

<button id="btn">添加列表項(xiàng)目</button> <ul id="list">     <li>列表項(xiàng)目1</li>     <li>列表項(xiàng)目2</li>     <li>列表項(xiàng)目3</li> </ul> <script>     var ul = document.getElementById("list");     var lis = ul.getElementsByTagName("li");     for (var i = 0; i < lis.length; i ++) {         lis[i].addEventListener('cluick', function (e) {             var e = e || window.event;             var target = e.target || e.srcElement;             alert(e.target.innerHTML);         }, false);     }     var i = 4;     var btn = document.getElementById("btn");     btn.addEventListener("click", function() {         var li = document.createElement("li");         li.innerHTML = "項(xiàng)目列表" + i++;         ul.appendChild(li);     }); </script>

示例2

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

<button id="btn">添加項(xiàng)目列表</button> <ul id="list">     <li>列表項(xiàng)目1</li>     <li>列表項(xiàng)目2</li>     <li>列表項(xiàng)目3</li> </ul> <script>     var ul = document.getElementById("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") {             alert(e.target.innerHTML);         }     }, false);     var i = 4;     var btn = document.getElementById("btn");     btn.addEventListener("click", function () {         var li = document.createElement("li");         li.innerHTML = "項(xiàng)目列表" + i++;         ul.appendChild(li);     }); </script>

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