JavaScript & jQuery 的应用(三):Initialization

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

相关连结:

$(document).ready() and pageLoad() are not the same!
ASP.NET AJAX Client Life-Cycle Events  
jQuery live() and ASP.NET Ajax asynchronous postback  
jQuery Events/live 
jQuery.live()与Event Delegation

Dotblogs 的标签:ASP.NET,Ajax,jQuery,JavaScript