JavaScript / JQuery事件委託如何?？

標籤：html   提高   ntb   指定   dom   jquery   訪問   區別   log   

一：什麼是事件委託？

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

事件委託就是利用事件冒泡原理實現的！事件冒泡：就是事件從最深節點開始，然後逐步向上傳播事件；例：頁面上有一個節點樹，div > ul  > li  >  a比如給最裡面的a 加一個click 事件，那麼事件就會一層一層的往外執行，執行順序 a > li > ul > div,  有這樣一個機制，當我們給最外層的div 添加點擊事件，那麼裡面的ul ， li  ， a  做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委託，委託他們父集代為執行事件；  什麼是事件冒泡？js所謂的事件冒泡就是子級元素的某個事件被觸發，它的上階項目的該事件也被遞迴執行，jQuery中的事件委託就是用的冒泡。 

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

    1.在JavaScript中添加到頁面上的事件處理常式的個數直接關係到頁面的整體運行效能。為什麼呢？因為，每個事件處理函數都是對象，對象會佔用記憶體，記憶體中的對象越多，效能就越差。此外，必須事先指定所有的事件處理常式而導致的DOM訪問次數，會延遲整個頁面的互動就緒時間。

    2.對有很多個資料的表格以及很長的列表逐個添加事件，簡直就是噩夢。所以事件委託，能極大地提高頁面的運行效能，減少開發人員的工作量。

三：JavaScript中的例子

      我們以下面的HTML代碼為例，用事件委託的方式實現當按一下滑鼠某個li元素的時候，li元素的背景變成紅色。

<ul id = "lists">　　<li>列表1</li>　　<li>列表2</li>　　
　　<li>列表3</li>　　
　　<li>列表4</li>
</ul>

 1         var lists = document.getElementById("lists"); 2  3         lists.addEventListener("click",function(event){ 4  5             var target = event.target; 6             //防止父元素ul也觸發事件 7             if(target.nodeName == "LI"){ 8                target.style.backgroundColor = "red"; 9             }10         })

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

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

2.用delegate（）方法

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

3.用bind()方法

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

live和bind區別:
bind方法只能給當前存在的元素繫結事件，對於事後採用JS等方式新產生的元素無效，而live方法則正好彌補了bind方法的這個缺陷，它可以對後產生的元素也可以綁定相應的事件

JavaScript / JQuery事件委託如何?？