JavaScript事件加載本身并不是什么復(fù)雜的功能，通常來說，window.onload就夠用了。如果想加載多個(gè)事件，我們可以采取以下方式：

window.onload = function(){  
func1();  
func2();  
func3();  
//更多加載事件………………  
}  

但如果由于某種特殊需要，我們不能合在一起寫嗎？如當(dāng)前區(qū)域是面向管理員，后臺(tái)生成頁面時(shí)只有當(dāng)用戶是管理員，頁面才生成這部分，而這部分也用到一些特殊的腳本，上面的方法就歇菜了！

JavaScript事件加載：前臺(tái)與后臺(tái)的尷尬

//后臺(tái)代碼  
< script type="text/javascript">  
window.onload = function(){  
func1();  
func2();  
//加載普通用戶用到的腳本……  
}  
< /script>  
< %# 以下腳本是為管理員準(zhǔn)備的 %>  
< % if @user.role == "manager"   %>  
window.onload = function(){  
func1();  
func2();  
//加載機(jī)密腳本……  
}  
< % end %>  

這種情況生成出來的頁面擁有兩個(gè)window.onload代碼塊，很顯然，第二個(gè)覆蓋掉***個(gè)。這時(shí)，輪到loadEvent函數(shù)出場了。

var loadEvent = function(fn) {  
var oldonload = window.onload;  
if (typeof window.onload != 'function') {  
window.onload = fn;  
}else {  
window.onload = function() {  
oldonload();  
fn();  
}  
}  
}  

它非常***地解決了互相覆蓋的問題，用法如下：

loadEvent(func1);  
loadEvent(func2);  
loadEvent(func3);  
//更多加載事件  

但現(xiàn)實(shí)的問題總是如此出奇不意，也如此刁鉆邪門。最近我想把所有的函數(shù)放到一個(gè)閉包中，以免除命名沖突之苦，比如那個(gè)有名的$的DOM選擇器。JQuery，Prototype，mootool都用它做選擇器的名字，共存成了個(gè)嚴(yán)重的問題。

(function(){  
if(!window.JS){  
window['JS'] = {}  
}  
var onReady = function(fn){  
var oldonload = window.onload;  
if (typeof window.onload != 'function') {  
window.onload = fn;  
}else {  
window.onload = function() {  
oldonload();  
fn();  
}  
}  
}  
JS.onReady = onReady;  
var $ = function(id){  
return document.getElementById(id);  
}  
JS.$ = $;  
})()  
 

報(bào)錯(cuò)，說找不到節(jié)點(diǎn)。為什么找不到呢？因?yàn)槲覀冊谡{(diào)用它的時(shí)候，DOM樹還沒有建立起來！不會(huì)吧，網(wǎng)頁是如此完整地顯示我們眼前了。這與閉包的運(yùn)作有關(guān)，當(dāng)JS引擎解析到閉包的***一個(gè)“}”，就把里面的東西鎖到一個(gè)密封的環(huán)境中，JS繼續(xù)向下執(zhí)行，就修正不了閉包中的window的屬性了。window有一個(gè)出名的屬性，叫做document，它引用著整個(gè)DOM樹(當(dāng)然還有其他操作)。DOM樹是一個(gè)復(fù)雜的鍵值對，當(dāng)JS不斷向下解析時(shí)，就不斷往document添加相應(yīng)的節(jié)點(diǎn)。但當(dāng)它塞進(jìn)閉包后，里面的時(shí)間就靜止了，因此它還停留在解析head的階段，document是殘缺的，想獲取body中的節(jié)點(diǎn)，當(dāng)然是返回null了。于是問題的關(guān)鍵是如何讓閉包內(nèi)的document重新繼續(xù)向下解析。 方法有兩個(gè)，一個(gè)是利用偵聽器(addEventListener與attachEvent)，一個(gè)是利用基于時(shí)間軸的setTimeout與setInterval。

(function(){  
if(!window.JS){  
window['JS'] = {}  
}  
var addEvent = function( obj, type, fn ) {  
if (obj.addEventListener)  
obj.addEventListener( type, fn, false );  
else if (obj.attachEvent) {  
obj["e"+type+fn] = fn;  
obj.attachEvent( "on"+type, function() {  
obj["e"+type+fn]();  
} );  
}  
};  
var onReady = function(loadEvent,waitForImages) {  
if(waitForImages) {  
return addEvent(window, 'load', loadEvent);  
}  
}  
JS.onReady = onReady;  
var $ = function(id){  
return document.getElementById(id);  
}  
JS.$ = $;  
})()  
 

OK，沒問題。上面的onReady函數(shù)有一個(gè)可選參數(shù)，判斷圖片是否加載完畢。我們知道JS引擎會(huì)在完成DOM樹后才開始處理圖片與音頻等東西，但如果我們的頁面嚴(yán)重依賴于腳本布局呢？！我們想盡快讓頁面呈現(xiàn)出大體形態(tài)，這就用到domReady了。我們在原基礎(chǔ)上改進(jìn)它。

(function(){  
if(!window.JS){  
window['JS'] = {}  
}  
var addEvent = function( obj, type, fn ) {  
if (obj.addEventListener)  
obj.addEventListener( type, fn, false );  
else if (obj.attachEvent) {  
obj["e"+type+fn] = fn;  
obj.attachEvent( "on"+type, function() {  
obj["e"+type+fn]();  
} );  
}  
};  
var onReady = function(loadEvent,waitForImages) {  
if(waitForImages) {  
return addEvent(window, 'load', loadEvent);  
}  
var init = function() {  
if (arguments.callee.done) return;  
arguments.callee.done = true;  
loadEvent.apply(document,arguments);  
};  
if(!+"\v1"){  
(function(){  
try {  
document.documentElement.doScroll("left");  
} catch(e) {  
setTimeout( arguments.callee, 0 );  
return;  
}  
init();  
})();  
}else{  
document.addEventListener( "DOMContentLoaded", function(){  
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );  
init();  
}, false );  
}  
return true;  
}  
JS.onReady = onReady;  
var $ = function(id){  
return document.getElementById(id);  
}  
JS.$ = $;  
})()  

dom標(biāo)準(zhǔn)瀏覽器用DOMContentLoaded，這是非常正現(xiàn)的W3C論DOM方法，與FF的DOMMouseScroll 不一樣，基本上所有非IE內(nèi)核的瀏覽器***版都支持它了。IE下我們可以通過偵聽document. documentElement. doScroll()來判斷DOM樹是否完成，原理是IE下只有當(dāng)DOM樹構(gòu)建完成后才能doScroll。但它還不是盡善盡美，它在IE下無法判定iframe的內(nèi)容是否加載完畢。我們繼續(xù)改進(jìn)它。

(function(){  
if(!window.JS){  
window['JS'] = {}  
}  
var addEvent = function( obj, type, fn ) {  
if (obj.addEventListener)  
obj.addEventListener( type, fn, false );  
else if (obj.attachEvent) {  
obj["e"+type+fn] = fn;  
obj.attachEvent( "on"+type, function() {  
obj["e"+type+fn]();  
} );  
}  
};  
var onReady = function(loadEvent,waitForImages) {  
if(waitForImages) {  
return addEvent(window, 'load', loadEvent);  
}  
var init = function() {  
if (arguments.callee.done) return;  
arguments.callee.done = true;  
loadEvent.apply(document,arguments);  
};  
if(!+"\v1"){  
if(window.self == window.top){  
(function(){  
try {  
document.documentElement.doScroll("left");  
} catch(e) {  
setTimeout( arguments.callee, 0 );  
return;  
}  
init();  
})();  
}else{  
document.attachEvent("onreadystatechange", function(){  
if ( document.readyState === "complete" ) {  
document.detachEvent( "onreadystatechange", arguments.callee );  
init();  
}  
});  
}  
}else{  
document.addEventListener( "DOMContentLoaded", function(){  
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );  
init();  
}, false );  
}  
return true;  
}  
JS.onReady = onReady;  
var $ = function(id){  
return document.getElementById(id);  
}  
JS.$ = $;  
})()  

我們簡直是在重新實(shí)現(xiàn)jquery的$(document).ready(function(){ })！它功能非常強(qiáng)悍，配合利用閉包做成的命名空間，基本刀槍不入。而且它就只污染一個(gè)全局變量“JS”，可以與YUI媲美了（笑）。不過對于一般應(yīng)用來說，我們用不著做到如此面面俱到。假如我們不需要對圖片進(jìn)行處理，頁面也沒有iframe，我們可以搞下面這個(gè)微縮版出來。

(function(){  
if(!window.JS){  
window['JS'] = {}  
}  
var onReady = function(loadEvent) {  
if(!+"\v1"){  
(function(){  
try {  
document.documentElement.doScroll("left");  
} catch(e) {  
setTimeout( arguments.callee, 0 );  
return;  
}  
loadEvent();  
})();  
}else{  
document.addEventListener( "DOMContentLoaded", loadEvent, false );  
}  
}  
JS.onReady = onReady;  
var $ = function(id){  
return document.getElementById(id);  
}  
JS.$ = $;  
})()  
 

以上就是對JavaScript事件加載的一些延伸思考。本文來自rubylouvre的博客：《javascript的事件加載》

【編輯推薦】

1. JavaScript使用心得匯總：從BOM和DOM談起
2. C# JavaScript函數(shù)使用
3. JavaScript 2.0新特性搶先看 向經(jīng)典語言靠近
4. 開源語言排行榜：PHP與JavaScript受青睞
5. ASP.NET控件開發(fā)之UpdatePanel觸發(fā)JavaScript腳本技巧