一：什麼是事件委託？

事件委託是利用事件冒泡，只指定一個事件處理程式來管理某一型別的所有事件。

二：為什麼要用事件委託？

    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，實現效果：

三：jQuery中的例子

    jQuery中的事件委託方式比較豐富，就以同樣的例子來說：

   1、用on方法,程式碼如下：

$(function(){
            $("#lists").on("click","li",function(event){
                var target = $(event.target);
                target.css("background-color","red");
            })
        })