一：什麼是事件委託？
事件委託是利用事件冒泡，只指定一個事件處理程序來管理某一類型的所有事件。
二：為什麼要用事件委託？
1.在JavaScript中加入到頁面上的事件處理程序的數量直接關係到頁面的整體運行效能。為什麼呢？因為，每個事件處理函數都是對象，對象會佔用內存，記憶體中的對象越多，效能就越差。此外，必須事先指定所有的事件處理程序而導致的DOM造訪次數，會延遲整個頁面的互動就緒時間。
2.對有很多個資料的表格以及很長的清單逐一新增事件，簡直就是惡夢。所以事件委託，能大幅提升頁面的運作效能，減少開發人員的工作量。
三：JavaScript中的範例
我們以下面的HTML程式碼為例，用事件委託的方式實作當滑鼠點選某個li元素的時候， li元素的背景變成紅色。
<ul id = "lists">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>以下是JavaScript程式碼：
var lists = document.getElementById("lists");
lists.addEventListener("click",function(event){
var target = event.target;
//防止父元素ul也触发事件
if(target.nodeName == "LI"){
target.style.backgroundColor = "red";
}
})點選清單4，實作效果：
$(function(){
$("#lists").on("click","li",function(event){
var target = $(event.target);
target.css("background-color","red");
})
})$(function(){
$("#lists").delegate("li","click",function(event){
var target = $(event.target);
target.css("background-color","red");
})
})$(function(){
$("#lists").bind("click","li",function(event){
var target = $(event.target);
if(target.prop("nodeName")=="LI"){
target.css("background-color","red");}
})
})以上是JavaScript(jQuery)中的事件委託的詳細內容。更多資訊請關注PHP中文網其他相關文章！
