最近接觸Jquery比較多，今天就被一個Jquery的事件委派坑慘了，特此記錄下，以方便日後的查閱。

一、定義

事件委派的定義就是，把原來加給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素。

二、版本

從jQuery1.7開始，jQuery引入了全新的事件綁定機制，on()和off()兩個函數統一處理事件綁定。

因為在此之前有bind(), live(), delegate()等方法來處理事件綁定，jQuery從性能優化以及方式統一方面考慮決定推出新的函數來統一事件綁定方法並且替換掉以前的方法。

三、傳統方法添加事件的缺點

<ul id="list">
    <li>1111
 
<li>
    <li>2222<li>
    <li>3333<li>
    <li>4444<li>
</ul>

這是一個ul，裏面包含4個li，如果想要給li加上點擊事件，彈出一些內容，我們一般這樣寫：

$(‘#list li‘).click(function(){
    alert(‘hello world!‘);
})

這樣當我們點擊list裏面的任何一個li都可以彈出‘hello world!’，但這樣做有兩個弊端：

1.很耗費資源，因為這種方式是給每個li都加上了事件，li的個數少的話還沒事，如果li多的話會很耗費資源。

2.如果後期動態添加li，不會擁有這個彈出事件。(我就是被這個坑慘了，無法找到合適的解決方案，這也是事件委派出現的一個重要背景)

針對以上問題，可以用事件委派來解決。

四、使用

on(events,[selector],[data],fn)

events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。

selector:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的後代。如果選擇器為null或省略，當它到達選定的元素，事件總是觸發。

data:當一個事件被觸發時要傳遞event.data給事件處理函數。

fn:該事件被觸發時執行的函數。 false 值也可以做一個函數的簡寫，返回false。

我們還是以最普通的click事件為例進行說明：

以click事件為例：

普通綁定事件：$(‘.btn1‘).click(function(){}綁定

on綁定事件：$(document).on(‘click‘,‘.btn2‘,function(){}綁定

那麽這兩種方式有什麽區別呢？

①click事件是在頁面加載後，獲取的所有類名為btn1的元素，然後綁定了這個click事件，你要是通過其他操作再生成一個btn1元素，它就沒有click這個事件，當我們點擊這個新建的btn1元素時，不會出發click事件。

②而on()事件起到了監聽的效果,可以實現動態html元素綁定，比如一開始只有一個btn2元素，你通過某種方法又加了一個btn2元素，這個元素也可以點擊，也可以出發click綁定的事件，當你無限添加，我都可以觸發。

on()委托事件的優點：大大提高了效率和頁面性能，解決的動態添加元素導致不能觸發的bug。

這就是事件委派的優點，希望對大家有所幫助！

Jquery之事件委派詳解