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（）方法吧。 ###

以上是JavaScript(jQuery)中的事件委託的詳細內容。更多資訊請關注PHP中文網其他相關文章！