隨著DOM結(jié)構(gòu)的復(fù)雜化和Ajax等動態(tài)腳本技術(shù)的運用導(dǎo)致如今的js界里最火熱的一項技術(shù)應(yīng)該是‘事件委托(event delegation)’了,什么是事件委托呢？小七給你娓娓道來,說白了就是想給子元素添加事件反而添加到父元素的身上，現(xiàn)在的你可能會說博主有病，放屁脫褲子多此一舉，那么博主告訴你博主放屁是不脫褲子的，下面說下什么時候使用事件委，（1）考慮一個ul，在li的數(shù)量非常少的時候，為每一個li添加事件當然不會存在太多性能方面的問題，但是當列表非常的長for循環(huán)太浪費內(nèi)存，長到上百上千甚至上萬的時候，為每個li添加事件就會對頁面性能產(chǎn)生很大的影響。（習慣用ul了，其他元素嵌套關(guān)系自行腦補）（2）給一個ul里面的幾個li添加了事件但是如果動態(tài)又生成了li則剛生成的li不具備事件這時就需要用到委托。
使用委托的優(yōu)點：原本需要給多個元素添加事件的現(xiàn)在只需要給他們的父元素添加事件，提高性能，提高可讀性。
那么現(xiàn)在是不是有點了解了呢？廢話不多說直接上圖，高清無碼的哦、
點擊每一個li都會觸發(fā)事件alert出1。
HTML：

Jq代碼不用委托：

Jq代碼事件委托：

li就是子元素，jq委托的格式就是這樣記住就行，當然on可以用bind,live,delegate.然而為什么小七沒用呢自然是有原因的。
jQuery 1.3之前使用.bind()實現(xiàn)委托給他已經(jīng)存在的子元素綁定事件，但不能給未來新增的元素綁定事件
為了突破單一.bind()方法的局限性jQuery 1.3使用live（）方法但卻只能放在直接選擇的元素后面，不能在層級比較深，連綴的DOM遍歷方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；
后來，為解決“事件傳播鏈”過長的問題， jQuery 1.4.2干脆直接引入了一個新方法.delegate()。
根據(jù)jQuery 1.7 Beta 1的發(fā)版說明，jQuery 1.7為了解決.bind()、.live()和.delegate()并存造成的不一致性問題，將會增加一對新的事件方法：.on()，所以不用糾結(jié)用刀還是用槍了以后直接用迫擊炮（on（）方法）
提示：使用事件委托時，如果注冊到目標元素上的其他事件處理程序使用.stopPropagation()阻止了事件傳播，那么事件委托就會失效。

轉(zhuǎn)載于:https://www.cnblogs.com/MagicZhao123/p/5980957.html

總結(jié)

以上是生活随笔為你收集整理的关于事件委托的整理 ，另附bind,live,delegate,on区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。