JavaScript(jQuery)中的事件委托

一：什么是事件委托？

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

二：為什么要用事件委托？

    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");
            })
        })

2.用delegate（）方法，代碼如下：

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

on()方法和delegate（）方法對於事件委托的寫法很像。並且執行事件委托的時候只有子元素（本文中的li）會觸發事件，而代為執行的父元素（本文中為ul）不會觸發事件，所以我們不需要盤判斷觸發事件的元素節點名，這一點明顯優於原生的JavaScript。

3.用bind()方法，代碼如下：

       $(function(){
            $("#lists").bind("click","li",function(event){
                var target = $(event.target);
                if(target.prop("nodeName")=="LI"){
                target.css("background-color","red");}
            })
        })

bind()方法同原生的JavaScript實現方法一樣，當父元素代子元素執行事件時，父元素也會觸發事件，所以我們需要判斷一下觸發事件的元素名。此外，用bind()方法給元素綁定事件的時候要注意，它只能給已經存在DOM元素添加事件，不能給未來存在DOM

元素添加添加事件。如果要頻繁地添加DOM元素，並且給新添加的DOM元素綁定事件的話，用live(),delegate(),on()等方法。鑒於jQuery從1.7之后就不推薦live（）和delegate（）方法了，所以大家還是使用on（）方法吧。