UWInfo Blog
發表新文章
[Join] | [忘記密碼] | [Login]
搜尋

搜尋意見
文章分類-jimmy
[所有文章分類]
  • ASP.NET (0)
  • ASP.NET2.0 (0)
  • ASP.NET4.0 (2)
  • JavaScript (0)
  • jQuery (1)
  • FireFox (0)
  • UW系統設定 (0)
  • SQL (0)
  • SQL 2008 (0)
  • mirror (0)
  • SVN (0)
  • IE (0)
  • IIS (0)
  • IIS6 (0)
  • 閒聊 (0)
  • W3C (0)
  • 作業系統 (0)
  • C# (0)
  • CSS (0)
  • FileServer (0)
  • HTML 5 (0)
  • CKEditor (0)
  • UW.dll (0)
  • Visual Studio (0)
  • Browser (0)
  • SEO (0)
  • Google Apps (0)
  • 網站輔助系統 (0)
  • DNS (0)
  • SMTP (0)
  • 網管 (0)
  • 社群API (0)
  • SSL (0)
  • App_Inventor (0)
  • URLRewrite (0)
  • 開發工具 (0)
  • JSON (0)
  • Excel2007 (0)
  • 試題 (0)
  • LINQ (0)
  • bootstrap (0)
  • Vue (0)
  • IIS7 (0)
  • foodpanda (0)
  • 編碼 (0)
  • 資安 (0)
  • Sourcetree (0)
  • MAUI (0)
  • CMD (0)
  • my sql (0)
所有文章分類
[jimmy的分類]
  • ASP.NET (48)
  • ASP.NET2.0 (15)
  • ASP.NET4.0 (34)
  • JavaScript (49)
  • jQuery (26)
  • FireFox (4)
  • UW系統設定 (3)
  • SQL (39)
  • SQL 2008 (25)
  • mirror (4)
  • SVN (4)
  • IE (9)
  • IIS (20)
  • IIS6 (1)
  • 閒聊 (7)
  • W3C (6)
  • 作業系統 (9)
  • C# (24)
  • CSS (12)
  • FileServer (1)
  • HTML 5 (11)
  • CKEditor (3)
  • UW.dll (13)
  • Visual Studio (16)
  • Browser (8)
  • SEO (1)
  • Google Apps (3)
  • 網站輔助系統 (4)
  • DNS (5)
  • SMTP (4)
  • 網管 (11)
  • 社群API (3)
  • SSL (4)
  • App_Inventor (1)
  • URLRewrite (2)
  • 開發工具 (6)
  • JSON (1)
  • Excel2007 (1)
  • 試題 (3)
  • LINQ (1)
  • bootstrap (0)
  • Vue (3)
  • IIS7 (3)
  • foodpanda (2)
  • 編碼 (2)
  • 資安 (3)
  • Sourcetree (1)
  • MAUI (1)
  • CMD (1)
  • my sql (1)
最新回應
  • [JQuery]事件綁定有效率的寫法-事件的委託處理(EventDelegation)
    http://jsperf.com/delegatevsbindtest3Chrome 上 效能的測...more
  • [JQuery]事件綁定有效率的寫法-事件的委託處理(EventDelegation)
    之前咪也有貼過類似的文章http://blog.uwinfo.com.tw/auth/article...more
  • 資料庫物件方法,GetDataRowAndReturnSelfOrNothing() 使用注意
    用 GetDataRowAndReturnSelfOrNothing 時要注意,下的條件是否足夠取出...more
標籤
  • viewstate
  • 光
  • DxHizbmA
  • post,
  • ORM,
  • 958
  • 6002121121
  • IIS
  • @@GxRnn
  • Viewstate
  • StreamRead
  • 532
  • ??[t]
  • 欄位
  • ef
  • 旋轉
  • MS8qKi9XQU
  • 三元
  • cA2yeXPF
  • message,
  • 126
  • -5229
  • BULK INSER
  • 現網站在大流量卡住時
  • 20
  • thread
  • a
  • Rf
  • CK
  • print 0xFF
  • pg ORDER B
  • 電子發票
  • [t]
  • 4hew.com
  • -7902
  • 0
  • cache 啟用
  • 時間
  • c
  • @@kw19U
  • 5669
  • ip
  • Button
  • Data212112
  • -1290
  • unt
  • sa
  • 874
  • contains
  • intlTelInp
[JQuery]事件綁定有效率的寫法-事件的委託處理(EventDelegation)
修改QC檢查站,新增效期檢查功能,因需要在動態產生的產品品項加上效期檢查鈕,每次動態產生的項目都要為按鈕元素綁定
觸發ajax檢查效期事件,原先的作法是每次動態產生的同時,為該元素綁定一次事件,品項有幾項就要做相同的綁定次數,後來在網路上看到另外一種寫法,利用DOM事件會由子元素一路向父元素Bubble Up的特性,在document或特定元素統一掛上事件函數,事件被觸發時再透過選擇器比對事件目標元素是否吻合,決定要不要執行事件邏輯,藉此提升效率,同時還能將"未來才會產生的元素"也納入事件的涵蓋範圍,以下是範例:
$(document).ready(function () {
            //原先的寫法:

           $("td").bind("click", function(){
     $(this).toggleClass("click");
   });
//事件委託:
​$("table").delegate("td","click", function(){
     $(this).toggleClass("click");
   });
    })

在這邊利用事件冒泡的特性,藉由頁面載入完成的同時對父元素作事件委託處理,接下來不管產生幾個動態元素,都可以透過事件監聽判斷該函式是否該執行,原先如果動態產生一百個品項就要綁定一百次的事件,只要頁面載入完成後一次就完成,達到有效率的寫法!!

jimmy, 2014/4/4 下午 05:04:07
文章分類:jQuery
Bike, candice, darren, Doug, 瞇瞇, Reiko 已閱讀.
意見
瞇瞇 say:
2014-04-10 09:40:32
http://jsperf.com/delegatevsbindtest3
Chrome 上 效能的測試,真的好很多。
darren say:
2014-04-07 17:45:41
之前咪也有貼過類似的文章
http://blog.uwinfo.com.tw/auth/article/peter/125
Comment:
*Nickname:
E-mail:
Blog URL:
  • *意見內容
  • 預覽
#Nickname#
2014/4/4 下午 05:04:07
#CommentContent#
*請輸入驗證碼: 看不懂,換張圖
 
~ Uwinfo ~