JavaScript & jQuery 的應用(三)：Initialization - The document ready handler | 流星的隨筆記事~☆ - 點部落

2009-11-06

JavaScript & jQuery 的應用(三)：Initialization - The document ready handler

13321
0
ASP.NET

JavaScript & jQuery 的應用(三)：Initialization - The document ready handler

在第一節的時候提到了關於Unobtrusive JavaScript，行為會和結構分離；為了達到這樣的目的，必需在DOM Element載入完成的時候再進行操作，例如：替buttion加上click事件。

在傳統的寫法，通常會使用window.onload

{    
    $("table tr:nth-child(even)").addClass("even");
    $(".delbtn").click(function(){alert(" are you sure?");});
}

但window.onload有個缺點，他會在網頁所有內容全部載入之後才會執行。如果今天網頁內容包含了大量的圖片，可能會造成Unobtrusive JavaScript運作失敗；比較好的情況應該是DOM元件已經產生完畢之後，就能夠進行操作。

在jQuery提供了一個方式，一旦DOM樹產生完畢(但尚未載入外部圖片前)就觸發程式碼的執行。

{
    $("table tr:nth-child(even)").addClass("even");
    $(".delbtn").click(function(){alert(" are you sure?");});
}); 

//縮寫式
$(function()
{
	$("table tr:nth-child(even)").addClass("even");
	$(".delbtn").click(function(){alert(" are you sure?");});	
});

既然提到了初始化，在ASP.NET Ajax中也有提供類似的方法來處理同樣的事情，雖然行為類似，不過和jQuery卻不太相同。

第一個是pageLoad()，在引用了Ajax的UpdatePanel之後，pageLoad觸發的時間點，會在第一次及postbacks之後執行，也包含了asynchronous postbacks。

    // Initialization code here, meant to run once. 
    alert("pageLoad");
    $get("Button2").onclick = function(){alert("Button2 click");};
}

另外一個是Sys.Application.add_init()；相較於pageLoad()，asynchronous postbacks不會觸發該事件。

{ 
    // Initialization code here, meant to run once.
    alert("Sys.Application.add_init");
    $get("Button2").onclick = function(){alert("Button2 click");};
});

一般的情況下大力推薦jQuery，因為jQuery還有進行優化的動作，四個方法jQuery永遠都是最先執行的；但是要特別注意：如果UpdatePanel內含有需要控制的項目，就需要額外做處理，因為asynchronous postbacks 後會全部取消，這時候可以透過Sys.WebForms.PageRequestManager 再重新處理。(當然網頁內容不大的時候，直接使用pageLoad會省事很多)

註：在jQuery 1.3版的時候，有提供了新的方式可以處理這個問題，改用live()來取代原有的bind()操作方式。
UpdatePanel回傳之後事件仍然生效，但並不是所有的事件都可以透過這個函式處理，也有可能會產生其它的效能問題。

Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
Currently not supported: blur, focus, mouseenter, mouseleave, change, submit

{
    alert("jQuery");
    $("#Button2").live("click", function(){alert("button click");});
});

執行順序：
jQuery > window.onload > Sys.Application.add_init > pageLoad

Dotblogs 的標籤：ASP.NET,Ajax,jQuery,JavaScript

回首頁