js中的事件委托或是事件代理詳解?
起因：
1、這是前端面試的經(jīng)典題型，要去找工作的小伙伴看看還是有幫助的；
2、其實(shí)我一直都沒(méi)弄明白，寫這個(gè)一是為了備忘，二是給其他的知其然不知其所以然的小伙伴們以參考；
概述：
那什么叫事件委托呢？
它還有一個(gè)名字叫事件代理，JavaScript高級(jí)程序設(shè)計(jì)上講：
事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。那這是什么意思呢？網(wǎng)上的各位大牛們講事件委托基本上都用了同一個(gè)例子，就是取快遞來(lái)解釋這個(gè)現(xiàn)象，我仔細(xì)揣摩了一下，這個(gè)例子還真是恰當(dāng)，我就不去想別的例子來(lái)解釋了，借花獻(xiàn)佛，我摘過(guò)來(lái)，大家認(rèn)真領(lǐng)會(huì)一下事件委托到底是一個(gè)什么原理： 有三個(gè)同事預(yù)計(jì)會(huì)在周一收到快遞。為簽收快遞，有兩種辦法：一是三個(gè)人在公司門口等快遞；二是委托給前臺(tái)MM代為簽收。現(xiàn)實(shí)當(dāng)中，我們大都采用委托的方案（公司也不會(huì)容忍那么多員工站在門口就為了等快遞）。前臺(tái)MM收到快遞后，她會(huì)判斷收件人是誰(shuí)，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個(gè)優(yōu)勢(shì)，那就是即使公司里來(lái)了新員工（不管多少），前臺(tái)MM也會(huì)在收到寄給新員工的快遞后核實(shí)并代為簽收。
這里其實(shí)還有2層意思的：
第一，現(xiàn)在委托前臺(tái)的同事是可以代為簽收的，即程序中的現(xiàn)有的dom節(jié)點(diǎn)是有事件的；
第二，新員工也是可以被前臺(tái)MM代為簽收的，即程序中新添加的dom節(jié)點(diǎn)也是有事件的。
為什么要用事件委托：
一般來(lái)說(shuō)，dom需要有事件處理程序，我們都會(huì)直接給它設(shè)事件處理程序就好了，那如果是很多的dom需要添加事件處理呢？比如我們有100個(gè)li，每個(gè)li都有相同的click點(diǎn)擊事件，可能我們會(huì)用for循環(huán)的方法，來(lái)遍歷所有的li，然后給它們添加事件，那這么做會(huì)存在什么影響呢？
在JavaScript中，添加到頁(yè)面上的事件處理程序數(shù)量將直接關(guān)系到頁(yè)面的整體運(yùn)行性能，因?yàn)樾枰粩嗟呐cdom節(jié)點(diǎn)進(jìn)行交互，訪問(wèn)dom的次數(shù)越多，引起瀏覽器重繪與重排的次數(shù)也就越多，就會(huì)延長(zhǎng)整個(gè)頁(yè)面的交互就緒時(shí)間，這就是為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因；如果要用事件委托，就會(huì)將所有的操作放到j(luò)s程序里面，與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數(shù)，提高性能；
每個(gè)函數(shù)都是一個(gè)對(duì)象，是對(duì)象就會(huì)占用內(nèi)存，對(duì)象越多，內(nèi)存占用率就越大，自然性能就越差了（內(nèi)存不夠用，是硬傷，
事件委托的原理：
事件委托是利用事件的冒泡原理來(lái)實(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í)行事件。
