大家好，我是IT修真院深圳分院第01期學(xué)員，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng) JS任務(wù)中可能會(huì)使用到的知識(shí)點(diǎn)：
JS中的event delegate，什么是event delegate（事件委托）
1.背景介紹
事件處理程序可以為現(xiàn)代web應(yīng)用程序提供交互能力，因此許多開發(fā)人員會(huì)向頁(yè)面中添加大量的處理程序。
但是在JavaScript中，添加到頁(yè)面中的事件處理程序的數(shù)量會(huì)直接影響頁(yè)面的整體運(yùn)行性能。?
理由：
1.每個(gè)函數(shù)都是對(duì)象，都會(huì)占用內(nèi)存。
2.事先指定所有的事件處理程序會(huì)導(dǎo)致DOM的訪問次數(shù)增加，會(huì)延遲整個(gè)頁(yè)面的交互時(shí)間。 對(duì)“事件處理程序過多”問題的解決方案就是事件委托（Delegation）。--JavaScript高級(jí)程序設(shè)計(jì)
3.事件委托的基本實(shí)現(xiàn)方式：在DOM樹中盡量高的節(jié)點(diǎn)添加事件處理程序，代替在其多個(gè)子節(jié)點(diǎn)中添加。
事件委托還有一個(gè)名字叫事件代理.
JS高程上講：
事件委托就是利用事件冒泡，只制定一個(gè)時(shí)間處理程序，就可以管理某一類型的所有事件。
這里用取快遞來解釋這個(gè)現(xiàn)象：
有三個(gè)同事預(yù)計(jì)會(huì)在周一收到快遞。為簽收快遞，有兩種辦法：
一是三個(gè)人在公司門口等快遞；
二是委托給前臺(tái)代為簽收。
現(xiàn)實(shí)當(dāng)中，我們大都采用委托的方案。前臺(tái)收到快遞后，她會(huì)判斷收件人是誰，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個(gè)優(yōu)勢(shì)，那就是即使公司里來了新員工（不管多少），前臺(tái)也會(huì)在收到寄給新員工的快遞后核實(shí)并代為簽收。
這里其實(shí)還有2層意思的：
第一，現(xiàn)在委托前臺(tái)的同事是可以代為簽收的，即程序中的現(xiàn)有的dom節(jié)點(diǎn)是有事件的；
第二，新員工也是可以被前臺(tái)代為簽收的，即程序中新添加的dom節(jié)點(diǎn)也是有事件的。
2.知識(shí)剖析
2.1為什么要用事件委托
在JavaScript中，添加到頁(yè)面上的事件處理程序數(shù)量將直接關(guān)系到頁(yè)面的整體運(yùn)行性能， 因?yàn)樾枰粩嗟呐cdom節(jié)點(diǎn)進(jìn)行交互，訪問dom的次數(shù)越多，引起瀏覽器重繪與重排的次數(shù)也就越多， 就會(huì)延長(zhǎng)整個(gè)頁(yè)面的交互就緒時(shí)間，這就是為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因；
每個(gè)函數(shù)都是一個(gè)對(duì)象，是對(duì)象就會(huì)占用內(nèi)存，對(duì)象越多，內(nèi)存占用率越大，100個(gè)li就要占用100個(gè)內(nèi)存空間。 如果要用事件委托，就會(huì)將所有的操作放到j(luò)s程序里面，只對(duì)它的父級(jí)(如果只有一個(gè)父級(jí))這一個(gè)對(duì)象進(jìn)行操作， 與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數(shù)，提高性能；
2.2事件委托的原理
事件委托是利用事件的冒泡原理來實(shí)現(xiàn)的，何為事件冒泡呢？
就是事件從最深的節(jié)點(diǎn)開始，然后逐步向上傳播事件，
舉個(gè)例子：
頁(yè)面上有這么一個(gè)節(jié)點(diǎn)樹，div>ul>li>a;比如給最里面的a加一個(gè)click點(diǎn)擊事件， 那么這個(gè)事件就會(huì)一層一層的往外執(zhí)行，執(zhí)行順序a>li>ul>div， 有這樣一個(gè)機(jī)制，那么我們給最外面的div加點(diǎn)擊事件，那么里面的ul，li，a做點(diǎn)擊事件的時(shí)候， 都會(huì)冒泡到最外層的div上，所以都會(huì)觸發(fā)，這就是事件委托，委托它們父級(jí)代為執(zhí)行事件。
實(shí)例1、
子節(jié)點(diǎn)實(shí)現(xiàn)相同的功能：
我們看看有多少次的dom操作，首先要找到ul，然后遍歷li，然后點(diǎn)擊li的時(shí)候，又要找一次目標(biāo)的li的位置，才能執(zhí)行最后的操作，每次點(diǎn)擊都要找一次li；
那么我們用事件委托的方式做又會(huì)怎么樣呢？
這里用父級(jí)ul做事件處理，當(dāng)li被點(diǎn)擊時(shí)，由于冒泡原理，事件就會(huì)冒泡到ul上，因?yàn)閡l上有點(diǎn)擊事件，所以事件就會(huì)觸發(fā)，當(dāng)然，這里當(dāng)點(diǎn)擊ul的時(shí)候，也是會(huì)觸發(fā)的.
2.3 事件冒泡及捕獲
DOM2.0模型將事件處理流程分為三個(gè)階段：
一、事件捕獲階段，
二、事件目標(biāo)階段，
三、事件起泡階段。
如圖：
事件捕獲：
當(dāng)某個(gè)元素觸發(fā)某個(gè)事件（如onclick），頂層對(duì)象document就會(huì)發(fā)出一個(gè)事件流，
隨著DOM樹的節(jié)點(diǎn)向目標(biāo)元素節(jié)點(diǎn)流去，直到到達(dá)事件真正發(fā)生的目標(biāo)元素。
在這個(gè)過程中，事件相應(yīng)的監(jiān)聽函數(shù)是不會(huì)被觸發(fā)的。
事件目標(biāo)：
當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素該事件相應(yīng)的處理函數(shù)。如果沒有綁定監(jiān)聽函數(shù)，那就不執(zhí)行。
事件起泡：
從目標(biāo)元素開始，往頂層元素傳播。途中如果有節(jié)點(diǎn)綁定了相應(yīng)的事件處理函數(shù)，這些函數(shù)都會(huì)被觸發(fā)。
2.4事件委托的優(yōu)點(diǎn)
通過剛才的對(duì)比介紹，大家應(yīng)該能夠體會(huì)到使用事件委托對(duì)于web應(yīng)用程序帶來的幾個(gè)優(yōu)點(diǎn)：
1.管理的函數(shù)變少了。不需要為每個(gè)元素都添加監(jiān)聽函數(shù)。對(duì)于同一個(gè)父節(jié)點(diǎn)下面類似的子元素，可以通過委托給父元素的監(jiān)聽函數(shù)來處理事件。
2.可以方便地動(dòng)態(tài)添加和修改元素，不需要因?yàn)樵氐母膭?dòng)而修改事件綁定。
3.JavaScript和DOM節(jié)點(diǎn)之間的關(guān)聯(lián)變少了，這樣也就減少了因循環(huán)引用而帶來的內(nèi)存泄漏發(fā)生的概率。
3.常見問題
如果我想讓事件代理的效果跟直接給節(jié)點(diǎn)的事件效果一樣怎么辦?
比如說只有點(diǎn)擊li才會(huì)觸發(fā)?
4.解決方案
Event對(duì)象提供了一個(gè)屬性叫target，可以返回事件的目標(biāo)節(jié)點(diǎn)，
我們成為事件源， 也就是說，target就可以表示為當(dāng)前的事件操作的dom，但是不是真正操作dom。?
標(biāo)準(zhǔn)瀏覽器用ev.target，IE瀏覽器用event.srcElement，此時(shí)只是獲取了當(dāng)前節(jié)點(diǎn)的位置， 并不知道是什么節(jié)點(diǎn)名稱，這里我們用nodeName來獲取具體是什么標(biāo)簽名。?
這樣改下就只有點(diǎn)擊li會(huì)觸發(fā)事件了，且每次只執(zhí)行一次dom操作
5.編碼實(shí)戰(zhàn)
現(xiàn)在講的都是document加載完成的現(xiàn)有dom節(jié)點(diǎn)下的操作， 那么如果是新增的節(jié)點(diǎn)，新增的節(jié)點(diǎn)會(huì)有事件嗎？ 現(xiàn)在是移入li，li變紅，移出li，li變藍(lán)，這么一個(gè)效果，然后點(diǎn)擊按鈕，可以向ul中添加一個(gè)li子節(jié)點(diǎn)
我們可以發(fā)現(xiàn)，當(dāng)用事件委托的時(shí)候，根本就不需要去遍歷元素的子節(jié)點(diǎn)， 只需要給父級(jí)元素添加事件就好了，其他的都是在js里面的執(zhí)行， 這樣可以大大的減少dom操作，這才是事件委托的精髓所在。
6.擴(kuò)展思考
什么樣的事件可以用事件委托，什么樣的事件不可以用呢？
答：
適合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。（所有用到按鈕的事件，多數(shù)的鼠標(biāo)事件和鍵盤事件）
值得注意的是，mouseover和mouseout雖然也有事件冒泡，但是處理它們的時(shí)候需要特別的注意，因?yàn)樾枰?jīng)常計(jì)算它們的位置，處理起來不太容易。
不適合的就有很多了，舉個(gè)例子，mousemove，每次都要計(jì)算它的位置，非常不好把控，在不如說focus，blur之類的，本身就沒用冒泡的特性，自然就不能用事件委托了。
7.參考文獻(xiàn)
參考一：(轉(zhuǎn))陳鑫偉的博客
參考二：(轉(zhuǎn))tony1223
8.更多討論
一、事件委托解決了什么問題？
1-可以綁定文檔完成后新出現(xiàn)的新的子元素
2-指定綁定事件的范圍（父元素）
3-不需要為每個(gè)元素設(shè)置綁定
二、與其它事件綁定有什么區(qū)別？
.on()可多個(gè)事件綁定新元素冒泡不能綁定子元素
.bind()可多個(gè)事件綁定新元素冒泡不能綁定子元素
.delegate()可多個(gè)事件綁定新元素冒泡綁定子元素
.click()單個(gè)事件不可綁定新元素冒泡綁定子元素
