大家好不同，我是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ì)向頁面中添加大量的處理程序百新。
但是在JavaScript中企软，添加到頁面中的事件處理程序的數(shù)量會(huì)直接影響頁面的整體運(yùn)行性能。?
理由：
1.每個(gè)函數(shù)都是對(duì)象饭望，都會(huì)占用內(nèi)存仗哨。
2.事先指定所有的事件處理程序會(huì)導(dǎo)致DOM的訪問次數(shù)增加，會(huì)延遲整個(gè)頁面的交互時(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)勢媚狰，那就是即使公司里來了新員工（不管多少），前臺(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中嗤形，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運(yùn)行性能， 因?yàn)樾枰粩嗟呐cdom節(jié)點(diǎn)進(jìn)行交互弧圆，訪問dom的次數(shù)越多赋兵，引起瀏覽器重繪與重排的次數(shù)也就越多， 就會(huì)延長整個(gè)頁面的交互就緒時(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è)例子：
頁面上有這么一個(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è)事件不可綁定新元素冒泡綁定子元素
