在我的另外一篇文章 解析Javascript事件冒泡機(jī)制里的最后，從冒泡機(jī)制的角度談了一點(diǎn)對(duì)Javascript 事件委托的理解。現(xiàn)在單獨(dú)把事件委托 拿出來(lái)和大家探討一下。
什么是委托？
所謂的委托，現(xiàn)實(shí)意義上講是指將自己的事務(wù)囑托他人代為處理。比如說(shuō)甲委托乙去做某些事兒，那么，甲則是委托人，乙是被委托人。真正做事情的是乙，即被委托人，而委托人甲 則是把相應(yīng)的信息傳遞給被委托人乙，自己本該做的事情交給了乙來(lái)做，如下圖這個(gè)例子：
那么在我們javascript 里，什么是事件委托呢？
事件委托
事件委托 允許我們不必為某些特定的節(jié)點(diǎn)添加事件監(jiān)聽(tīng)器，而是將事件監(jiān)聽(tīng)器添加到（這些節(jié)點(diǎn)的）某個(gè) parent節(jié)點(diǎn)上。事件監(jiān)聽(tīng)器分析冒泡事件，去找到匹配的子節(jié)點(diǎn)元素，然后做出相應(yīng)的事件響應(yīng)。
事件委托具體是怎么工作的呢？ 我們從下面的簡(jiǎn)單的例子開(kāi)始，給大家展示事件委托的工作原理。
先看下面一段代碼：
- <div id="box1" class="box1">
- <p id="para1">Paragraph 1</p>
- <p id="para2">Paragraph 2</p>
- <p id="para3">Paragraph 3</p>
- <p id="para4">Paragraph 4</p>
- <p id="para5">Paragraph 5</p>
- </div>
我現(xiàn)在想每點(diǎn)擊一次div1 下的 p 元素時(shí)，彈出 "paraX is clicked." 的提示框，為此，我們一般的做法就是給每一個(gè)p元素增加 相應(yīng)的事件監(jiān)聽(tīng)：
- <script type="text/javascript">
- window.onload = function() {
- //添加事件監(jiān)聽(tīng)
- document.getElementById("para1").addEventListener("click",eventPerformed);
- document.getElementById("para2").addEventListener("click",eventPerformed);
- document.getElementById("para3").addEventListener("click",eventPerformed);
- document.getElementById("para4").addEventListener("click",eventPerformed);
- document.getElementById("para5").addEventListener("click",eventPerformed);
- }
- //事件相應(yīng)函數(shù)
- function eventPerformed(event){
- alert(event.target.id+" is clicked.");
- }
- </script>
是的，上述的代碼完全可以實(shí)現(xiàn)上的功能。我們思考這個(gè)問(wèn)題，如果這個(gè)div1 下有非常多個(gè) p元素，我們總不能每一個(gè)都寫上形如document.getElementById("paraX").addEventListener("click",eventPerformed);的代碼片段吧，這樣的話就太機(jī)械了！另外，如果在實(shí)際的應(yīng)用中，很有可能同過(guò)js在 div1下動(dòng)態(tài)生成p 元素，這時(shí)候，我們相應(yīng)地還要添加事件處理函數(shù)，像這種動(dòng)態(tài)添加的動(dòng)作很有可能分散在我們 應(yīng)用的很多個(gè)角落，這樣動(dòng)態(tài)添加處理函數(shù)將是一個(gè)非常蛋疼的事兒！
解決方法： 利用 事件冒泡傳遞的機(jī)制，將本來(lái)本元素要完成的事件處理邏輯，委托給 父類節(jié)點(diǎn)，父類節(jié)點(diǎn)根據(jù)觸發(fā)事件的節(jié)點(diǎn)信息，執(zhí)行對(duì)應(yīng)的事件處理邏輯。
- <script type="text/javascript">
- window.onload = function() {
- //添加事件監(jiān)聽(tīng)
- document.getElementById("box1").addEventListener("click",eventPerformed);
- }
- //事件相應(yīng)函數(shù)
- function eventPerformed(event){
- if(event.target.nodeName == 'P')
- {
- alert(event.target.id+" is clicked.");
- }
- }
- </script>
通過(guò)上述的代碼，就可以輕松搞定P 元素的事件處理函數(shù)綁定了，動(dòng)態(tài)添加元素的時(shí)候，不需要再手動(dòng)地綁定處理函數(shù)了。
可以看出，使用事件委托，可以簡(jiǎn)化了事件的處理邏輯，避免了多余的事件處理函數(shù)，進(jìn)而節(jié)約了一定的內(nèi)存。
但是，事件委托也是有缺點(diǎn)的： 如果現(xiàn)在的dom 元素分為很多很多層，對(duì)于底層事件的委托，有可能在事件冒泡的過(guò)程中，中途被某個(gè)節(jié)點(diǎn) 終止冒泡了，這樣事件就傳遞不到上層，則委托就會(huì)失敗了。
jquery 對(duì)事件委托的支持
在jQuery里對(duì)事件委托的支持，有以下幾個(gè)函數(shù)：
其中，live() 和die()、delegate()和undelegate() 是成對(duì)出現(xiàn)的，分別是綁定和解綁的過(guò)程。
delegate(selector,[type],[data],fn)
jquery 的delegate 方法是典型的為事件委托準(zhǔn)備的。
看一下相應(yīng)的定義：
delegate(selector,[type],[data],fn)
selector:選擇器字符串，用于過(guò)濾器觸發(fā)事件的元素。
type: 附加到元素的一個(gè)或多個(gè)事件。由空格分隔多個(gè)事件值。必須是有效的事件。
data: 傳遞到函數(shù)的額外數(shù)據(jù)
fn: 當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)
概述：
指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
使用 delegate() 方法的事件處理程序適用于當(dāng)前或未來(lái)的元素（比如由腳本創(chuàng)建的新元素）。
例如，我們將上面的例子用jquery實(shí)現(xiàn)：
- <script type="text/javascript">
- $(function() {
- //讓box1 處理來(lái)自 子元素P的click事件委托
- $("#box1").delegate("p", "click", function(event) {
- alert(event.target.id + " is clicked.");
- });
- })
- </script>
上述的代碼實(shí)現(xiàn)了對(duì)box1 的子元素P 的click事件的委托處理。如果我們?cè)趈s中動(dòng)態(tài)地給box1 增加子元素P，相應(yīng)的處理函數(shù)也會(huì)對(duì)其有效。
undelegate([selector,[type],fn])
相應(yīng)地，如果想取消對(duì)應(yīng)的事件委托，可以使用以下代碼：
- $("#box1").undelegate("p","click");
live(type, [data], fn)
type : 事件類型
data ：附加的額外數(shù)據(jù)
fn : 相應(yīng)的處理函數(shù)
描述：jQuery 給所有匹配的元素附加一個(gè)事件處理函數(shù)，即使這個(gè)元素是以后再添加進(jìn)來(lái)的也有效。
備注： 自jQuery1.9后 就廢除這個(gè)函數(shù)，只能在jQuery1.9以前的版本中使用。
將上述的功能用此方法實(shí)現(xiàn)：
- <script type="text/javascript">
- $(function() {
- $("p").live("click",function(event) {
- alert(event.target.id + " is clicked.");
- });
- })
- </script>
die(type, [fn])
備注： 自jQuery1.9后 就廢除這個(gè)函數(shù)，只能在jQuery1.9以前的版本中使用。
從元素中刪除先前用.live()綁定的所有事件.(此方法與live正好完全相反。)如果不帶參數(shù)，則所有綁定的live事件都會(huì)被移除。
與live() 相對(duì)應(yīng)，取消綁定，則用下列代碼：
在事件綁定上，jQuery 提供了一種更通用的函數(shù)：
on(events,[selector],[data],fn)
參數(shù)：
events:一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
selector:一個(gè)選擇器字符串用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。如果選擇的< null或省略，當(dāng)它到達(dá)選定的元素，事件總是觸發(fā)。
data:當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。
fn:該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。 false 值也可以做一個(gè)函數(shù)的簡(jiǎn)寫，返回false。
將上述的功能改用on函數(shù)實(shí)現(xiàn)：
- <script type="text/javascript">
- $(function() {
- $("#box1").on("click","p",function(event) {
- alert(event.target.id + " is clicked.");
- });
- })
- </script>
off(events,[selector],[fn])
在選擇元素上移除一個(gè)或多個(gè)事件的事件處理函數(shù)。off() 方法移除用.on()綁定的事件處理程序。
移除上面on 綁定的委托:
- $("#box1").off("click","p");
在網(wǎng)上看到了關(guān)于 事件委托的總結(jié)，感覺(jué)挺不錯(cuò)的，就翻譯一下貼在這里，跟大家分享一下，如有錯(cuò)誤或紕漏，請(qǐng)指出。 點(diǎn)擊我查看原文；
總結(jié)：
先決條件是要有一個(gè)容器，允許通用的事件處理函數(shù)。
算法：
- 將事件處理函數(shù)綁定到容器上，
- 根據(jù)不同的event.target作相應(yīng)的處理
應(yīng)用場(chǎng)景：
- 需要為子元素用一個(gè)事件處理函數(shù) 處理相同的動(dòng)作；
- 簡(jiǎn)化不同動(dòng)作間的結(jié)構(gòu)
優(yōu)點(diǎn)：
- 簡(jiǎn)化了初始化的過(guò)程，減少了多余的事件處理函數(shù)，進(jìn)而節(jié)省了內(nèi)存。
- 簡(jiǎn)化了dom節(jié)點(diǎn)更新時(shí)，相應(yīng)事件的更新
- Allows to use
innerHTML without additional processing.
缺點(diǎn)：
- 第一，要求事件在IE中必須冒泡. 大多數(shù)的事件會(huì)冒泡，但是并不是所有的。對(duì)于其他的瀏覽器而言，捕獲階段也會(huì)同樣適用。
- 第二，理論上委托會(huì)導(dǎo)致瀏覽器額外的加載，因?yàn)樵谌萜鲀?nèi)的任意一個(gè)地方事件的發(fā)生，都會(huì)運(yùn)行事件處理函數(shù)，所以多數(shù)情況下事件處理函數(shù)都是在空循環(huán)（沒(méi)有意義的動(dòng)作），通常不是什么大不了的事兒。
