概述：
那什么叫事件委托呢昼窗？它還有一個名字叫事件代理喝滞，JavaScript高級程序設(shè)計上講：事件委托就是利用事件冒泡，只指定一個事件處理程序膏秫，就可以管理某一類型的所有事件右遭。那這是什么意思呢？事件委托到底是一個什么原理：
有三個同事預(yù)計會在同一天收到快遞缤削。為簽收快遞窘哈，有兩種辦法：一是三個人在公司門口等快遞；二是委托給前臺代為簽收⊥じ遥現(xiàn)實(shí)當(dāng)中滚婉，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞）。前臺收到快遞后帅刀，她會判斷收件人是誰让腹，然后按照收件人的要求簽收，這種方案還有一個優(yōu)勢扣溺，那就是即使公司里來了新員工（不管多少）骇窍，前臺MM也會在收到寄給新員工的快遞后核實(shí)并代為簽收。
這里其實(shí)還有2層意思的：
第一锥余，現(xiàn)在委托前臺的同事是可以代為簽收的腹纳，即程序中的現(xiàn)有的dom節(jié)點(diǎn)是有事件的；
第二，新員工也是可以被前臺代為簽收的嘲恍，即程序中新添加的dom節(jié)點(diǎn)也是有事件的足画。
為什么要用事件委托：
一般來說，dom需要有事件處理程序佃牛，我們都會直接給它設(shè)事件處理程序就好了淹辞，那如果是很多的dom需要添加事件處理呢？比如我們有100個li俘侠，每個li都有相同的click點(diǎn)擊事件象缀，可能我們會用for循環(huán)的方法，來遍歷所有的li兼贡，然后給它們添加事件攻冷，那這么做會存在什么影響呢？
在JavaScript中遍希，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運(yùn)行性能等曼，因?yàn)樾枰粩嗟呐cdom節(jié)點(diǎn)進(jìn)行交互，訪問dom的次數(shù)越多凿蒜，引起瀏覽器重繪與重排的次數(shù)也就越多禁谦，就會延長整個頁面的交互就緒時間，這就是為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因废封；如果要用事件委托州泊，就會將所有的操作放到j(luò)s程序里面，與dom的操作就只需要交互一次漂洋，這樣就能大大的減少與dom的交互次數(shù)遥皂，提高性能；
每個函數(shù)都是一個對象刽漂，是對象就會占用內(nèi)存演训，對象越多，內(nèi)存占用率就越大贝咙，自然性能就越差了（內(nèi)存不夠用样悟，是硬傷，哈哈）庭猩，比如上面的100個li窟她，就要占用100個內(nèi)存空間，如果是1000個蔼水，10000個呢震糖，那只能說呵呵了，如果用事件委托徙缴，那么我們就可以只對它的父級（如果只有一個父級）這一個對象進(jìn)行操作试伙，這樣我們就需要一個內(nèi)存空間就夠了嘁信，是不是省了很多于样，自然性能就會更好疏叨。
事件委托的原理：
事件委托是利用事件的冒泡原理來實(shí)現(xiàn)的，何為事件冒泡呢穿剖？就是事件從最深的節(jié)點(diǎn)開始蚤蔓，然后逐步向上傳播事件，舉個例子：頁面上有這么一個節(jié)點(diǎn)樹糊余，div>ul>li>a;比如給最里面的a加一個click點(diǎn)擊事件秀又，那么這個事件就會一層一層的往外執(zhí)行，執(zhí)行順序a>li>ul>div贬芥，有這樣一個機(jī)制吐辙，那么我們給最外面的div加點(diǎn)擊事件，那么里面的ul蘸劈，li昏苏，a做點(diǎn)擊事件的時候，都會冒泡到最外層的div上威沫，所以都會觸發(fā)贤惯，這就是事件委托，委托它們父級代為執(zhí)行事件棒掠。
子節(jié)點(diǎn)實(shí)現(xiàn)相同的功能：實(shí)現(xiàn)功能是點(diǎn)擊li孵构，彈出李清照三個字。
上面為普通的寫法
首先要找到ul烟很，然后遍歷li颈墅，然后點(diǎn)擊li的時候，又要找一次目標(biāo)的li的位置雾袱，才能執(zhí)行最后的操作恤筛，每次點(diǎn)擊都要找一次li；
那么我們用事件委托的方式做又會怎么樣呢谜酒？
上面為事件代理的寫法
這里用父級ul做事件處理叹俏，當(dāng)li被點(diǎn)擊時，由于冒泡原理僻族，事件就會冒泡到ul上粘驰，因?yàn)閡l上有點(diǎn)擊事件，所以事件就會觸發(fā)述么，當(dāng)然蝌数，這里當(dāng)點(diǎn)擊ul的時候，也是會觸發(fā)的度秘，那么問題就來了顶伞，如果我想讓事件代理的效果跟直接給節(jié)點(diǎn)的事件效果一樣怎么辦饵撑，比如說只有點(diǎn)擊li才會觸發(fā)。
Event對象提供了一個屬性叫target唆貌，可以返回事件的目標(biāo)節(jié)點(diǎn)滑潘，我們成為事件源，也就是說锨咙，target就可以表示為當(dāng)前的事件操作的dom语卤，但是不是真正操作dom，當(dāng)然酪刀，這個是有兼容性的粹舵，標(biāo)準(zhǔn)瀏覽器用ev.target，IE瀏覽器用event.srcElement骂倘，此時只是獲取了當(dāng)前節(jié)點(diǎn)的位置眼滤，并不知道是什么節(jié)點(diǎn)名稱，這里我們用nodeName來獲取具體是什么標(biāo)簽名历涝，這個返回的是一個大寫的诅需，我們需要轉(zhuǎn)成小寫再做比較（習(xí)慣問題）：
事件委托，操作同樣的效果
前面所講的都是document加載完成的現(xiàn)有dom節(jié)點(diǎn)下的操作睬关，那么如果是新增的節(jié)點(diǎn)诱担，新增的節(jié)點(diǎn)會有事件嗎？
實(shí)現(xiàn)一個這樣的功能：現(xiàn)在是移入li电爹，li變紅蔫仙，移出li，li變白丐箩，這么一個效果摇邦，然后點(diǎn)擊按鈕，可以向ul中添加一個li子節(jié)點(diǎn)
新增節(jié)點(diǎn)也有樣式效果（一般寫法）
下面看下用時間委托的寫法：
事件委托的寫法
上面是用事件委托的方式屎勘，新添加的子元素是帶有事件效果的施籍，我們可以發(fā)現(xiàn)，當(dāng)用事件委托的時候概漱，根本就不需要去遍歷元素的子節(jié)點(diǎn)丑慎，只需要給父級元素添加事件就好了，其他的都是在js里面的執(zhí)行瓤摧，這樣可以大大的減少dom操作竿裂，這才是事件委托的精髓所在。
