日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

关于事件委托的整理 ,另附bind,live,delegate,on区别

發布時間:2025/3/15 编程问答 19 豆豆
生活随笔 收集整理的這篇文章主要介紹了 关于事件委托的整理 ,另附bind,live,delegate,on区别 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

Jq代碼不用委托:


Jq代碼事件委托:

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

轉載于:https://www.cnblogs.com/MagicZhao123/p/5980957.html

總結

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

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。