jQuery 事件委托on、bind、live、delegate

http://www.jb51.net/article/57827.htm

bind: 3.0-

  • 表格中要綁定單擊事件的5000個單元格,那么查找和遍歷5000個單元格會導(dǎo)致腳本執(zhí)行速度明顯變慢,而保存5000個td元素和相應(yīng)的事件處理程序也會占用大量內(nèi)存
  • 通過Ajax從服務(wù)器動態(tài)加載另外50張照片,bind不為50個這50單元格綁定事件。使用.bind()方法只會給第一頁中的50個單元格綁定單擊事件,動態(tài)加載的后續(xù)頁面中的單元格都不會有這個單擊事件。

live: 1.7-

  • $()函數(shù)會找到當(dāng)前頁面中的所有td元素并創(chuàng)建jQuery對象,但在確認(rèn)事件目標(biāo)時卻不用這個td元素集合,而是使用選擇符表達(dá)式與event.target或其祖先元素進(jìn)行比較,因而生成這個jQuery對象會造成不必要的開銷;
  • 默認(rèn)把事件綁定到$(document)元素,如果DOM嵌套結(jié)構(gòu)很深,事件冒泡通過大量祖先元素會導(dǎo)致性能損失;
  • 只能放在直接選擇的元素后面,不能在連綴的DOM遍歷方法后面使用,即$("#info_table td").live...可以,但$("#info_table").find("td").live...不行;
    收集td元素并創(chuàng)建jQuery對象,但實際操作的卻是$(document)對象

delegate: 3.0-

  • 直接將目標(biāo)元素選擇符("td")、事件("click")及處理程序與“受拖方”$("#info_table")綁定,不額外收集元素、事件傳播路徑縮短、語義明確;
  • 支持在連綴的DOM遍歷方法后面調(diào)用,即支持$("table").find("#info").delegate...,支持精確控制;
  • 建議使用on

jQuery中的bind(), live(), on(), delegate()
http://www.cnblogs.com/moonreplace/archive/2012/10/09/2717136.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    前端進(jìn)階之旅閱讀 16,952評論 18 503
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,508評論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,276評論 0 1
  • jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之后又一個優(yōu)秀的JavaScript...
    一木_qintb閱讀 1,114評論 0 4
  • 美對人有一種天生的吸引力,很多人都不得不承認(rèn)自己是外貌控,男人打量女人的第一眼往往是看是否外貌合格,女人遇見陌生人...
    hi阿玖閱讀 796評論 4 2

友情鏈接更多精彩內(nèi)容