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
標籤
  • firewall
  • 364
  • vs
  • [t],
  • list
  • 444
  • 8308
  • 484
  • 66
  • 438
  • 72
  • 728
  • 864
  • 516
  • 436
  • 628
  • dns
  • 462
  • VPN
  • 3991
  • 896
  • find
  • 3072
  • 22
  • UNT
  • ti
  • 80
  • 3378
  • [U2]
  • git
  • asp
  • SES
  • 590
  • message
  • max
  • ?
  • 476
  • 654
  • 978
  • XML
  • 398
  • 828
  • 726
  • aes
  • 116
  • mine
  • backup
  • pdf
  • lock
  • table
[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 ~