jQuery對(duì)事件的綁定分別有幾個(gè)API

.bind()/.live()/.delegate()/.on()

不管是用什么方式綁定，歸根到底還是用addEventListener/attachEvent處理的,正如選擇器一樣不管如何匹配最終還是那么幾個(gè)瀏覽器接口處理,既然如此,事件為什么還要區(qū)分那么多不同的處理方案?

這里就要涉及到 DOM 事件處理模型了，就是常提到的捕獲與冒泡，傳統(tǒng)的事件處理給某一元素綁定了一個(gè)點(diǎn)擊事件，傳入一個(gè)回調(diào)句柄處理。

element.addEventListener('click',doSomething,false)

這樣的代碼再正常不過(guò)了，但是，如果頁(yè)面上有幾百個(gè)元素需要綁定（假設(shè)），那么務(wù)必就要綁定幾百次啦。
這樣問(wèn)題就出現(xiàn)了：

第一：大量的事件綁定，性能消耗，而且還需要解綁（IE會(huì)泄漏）
第二：綁定的元素必須要存在
第三: 后期生成HTML會(huì)沒(méi)有事件綁定，需要重新綁定
第四: 語(yǔ)法過(guò)于繁雜

有沒(méi)有辦法優(yōu)化呢？答案是肯定的，那就是采用委托的機(jī)制

事件委托

DOM 有個(gè)事件流的特性，也就是說(shuō)我們?cè)陧?yè)面上觸發(fā)節(jié)點(diǎn)的時(shí)候事件都會(huì)上下或者向上傳播，事件捕捉和事件冒泡。

DOM2.0 模型將事件處理流程分為三個(gè)階段：

一、事件捕獲階段
二、事件目標(biāo)階段
三、事件起泡階段

事件傳送可以分為3個(gè)階段。
（1）在事件捕捉（Capturing）階段，事件將沿著DOM樹(shù)向下轉(zhuǎn)送，目標(biāo)節(jié)點(diǎn)的每一個(gè)祖先節(jié)點(diǎn)，直至目標(biāo)節(jié)點(diǎn)。例如，若用戶單擊了一個(gè)超鏈接，則該單擊事件將從document節(jié)點(diǎn)轉(zhuǎn)送到html元素，body元素以及包含該鏈接的p元素。在此過(guò)程中，瀏覽器都會(huì)檢測(cè)針對(duì)該事件的捕捉事件監(jiān)聽(tīng)器，并且運(yùn)行這件事件監(jiān)聽(tīng)器。
（2）在目標(biāo)（target）階段，瀏覽器在查找到已經(jīng)指定給目標(biāo)事件的事件監(jiān)聽(tīng)器之后，就會(huì)運(yùn)行該事件監(jiān)聽(tīng)器。目標(biāo)節(jié)點(diǎn)就是觸發(fā)事件的 DOM 節(jié)點(diǎn)。例如，如果用戶單擊一個(gè)超鏈接，那么該鏈接就是目標(biāo)節(jié)點(diǎn)（此時(shí)的目標(biāo)節(jié)點(diǎn)實(shí)際上是超鏈接內(nèi)的文本節(jié)點(diǎn)）。
（3）在冒泡（Bubbling）階段，事件將沿著DOM樹(shù)向上轉(zhuǎn)送，再次逐個(gè)訪問(wèn)目標(biāo)元素的祖先節(jié)點(diǎn)到document節(jié)點(diǎn)。該過(guò)程中的每一步。瀏覽器都將檢測(cè)那些不是捕捉事件監(jiān)聽(tīng)器的事件監(jiān)聽(tīng)器，并執(zhí)行它們。
利用事件傳播（這里是冒泡）這個(gè)機(jī)制，就可以實(shí)現(xiàn)事件委托

具體來(lái)說(shuō)，事件委托就是事件目標(biāo)自身不處理事件，而是把處理任務(wù)委托給其父元素或者祖先元素，甚至根元素（document）

委托這么好的特性 jQuery 當(dāng)然不會(huì)放過(guò)，所以就衍生出  .bind()、.live() .on()和.delegate()，jQuery 的事件綁定有多個(gè)方法可以調(diào)用，以 click 事件來(lái)舉例：

click方法
bind方法
delegate方法
on方法

這里要清楚的認(rèn)識(shí)：不管你用的是（click / bind / delegate)之中哪個(gè)方法，最終都是 jQuery 底層都是調(diào)用 on 方法來(lái)完成最終的事件綁定。因此從某種角度來(lái)講除了在書(shū)寫(xiě)的方便程度及習(xí)慣上挑選，不如直接都采用 on 方法來(lái)的痛快和直接。

所以在新版的 API 中都這么寫(xiě)到:

.on()方法事件處理程序到當(dāng)前選定的 jQuery 對(duì)象中的元素。在jQuery 1.7中，.on()方法提供綁定事件處理的所有功能、效果不言而喻了，除了性能的差異，通過(guò)委托的事件還能很友好的支持動(dòng)態(tài)綁定，只要 on 的delegate 象是 HTML 頁(yè)面原有的元素，由于是事件的觸發(fā)是通過(guò)Javascript的事件冒泡機(jī)制來(lái)監(jiān)測(cè)，所以對(duì)于所有子元素（包括后期通過(guò)JS生成的元素）所有的事件監(jiān)測(cè)均能有效，且由于不用對(duì)多個(gè)元素進(jìn)行事件綁定，能夠有效的節(jié)省內(nèi)存的損耗。