在javascript中，事件委託也稱為事件託管或事件代理，就是把目標節點的事件綁定到祖先節點上；它是利用事件冒泡原理，管理某一類型的所有事件，利用父元素來代表子元素的某一類型事件的處理方式。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
在JavaScript 中，事件委託（delegate）也稱為事件託管或事件代理，是利用事件冒泡原理，管理某一類型的所有事件，利用父元素來代表子元素的某一類型事件的處理方式。
這樣做的好處：優化程式碼，提升運行效能，真正把 HTML 和 JavaScript 分離，也能防止出現在動態新增或刪除節點過程中註冊的事件遺失的現象。
範例1
下面範例使用一般方法為清單結構中每個清單項目綁定click 事件，點擊清單項目，將彈出提示對話框，提示當前節點包含的文字資訊。但是，當我們為列錶框動態新增清單項目之後，新新增的清單項目沒有綁定 click 事件，這與我們的願望相反。
<button id="btn">添加列表项目</button>
<ul id="list">
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目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 = "项目列表" + i++;
ul.appendChild(li);
});
</script>範例2
下面範例借助事件委託技巧，利用事件傳播機制，在列錶框ul 元素上綁定click 事件，當事件傳播到父節點ul 上時，捕獲click 事件，然後在事件處理函數中偵測當前事件回應節點類型，如果是li 元素，則進一步執行下面程式碼，否則跳出事件處理函數，結束回應。
<button id="btn">添加项目列表</button>
<ul id="list">
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目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 = "项目列表" + i++;
ul.appendChild(li);
});
</script>當頁面存在大量元素並且每個元素註冊了一個或多個事件時，可能會影響效能。當存取和修改更過的DOM 節點時，程式就會更慢；特別是事件連結過程都發生在load（或DOMContentReady）事件中時，對任何一個富交互網頁來說，這都是一個繁忙的時間段。另外，瀏覽器需要保存每個事件句柄的記錄，也會佔用更多記憶體。
【推薦學習：javascript進階教學】
#以上是javascript事件委託是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！
