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

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

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

JavaScript事件加載：前臺與后臺的尷尬

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

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

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);  
//更多加載事件  

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

(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.$ = $;  
})()  
 

報錯，說找不到節點。為什么找不到呢？因為我們在調用它的時候，DOM樹還沒有建立起來！不會吧，網頁是如此完整地顯示我們眼前了。這與閉包的運作有關，當JS引擎解析到閉包的***一個“}”，就把里面的東西鎖到一個密封的環境中，JS繼續向下執行，就修正不了閉包中的window的屬性了。window有一個出名的屬性，叫做document，它引用著整個DOM樹(當然還有其他操作)。DOM樹是一個復雜的鍵值對，當JS不斷向下解析時，就不斷往document添加相應的節點。但當它塞進閉包后，里面的時間就靜止了，因此它還停留在解析head的階段，document是殘缺的，想獲取body中的節點，當然是返回null了。于是問題的關鍵是如何讓閉包內的document重新繼續向下解析。 方法有兩個，一個是利用偵聽器(addEventListener與attachEvent)，一個是利用基于時間軸的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函數有一個可選參數，判斷圖片是否加載完畢。我們知道JS引擎會在完成DOM樹后才開始處理圖片與音頻等東西，但如果我們的頁面嚴重依賴于腳本布局呢？！我們想盡快讓頁面呈現出大體形態，這就用到domReady了。我們在原基礎上改進它。

(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標準瀏覽器用DOMContentLoaded，這是非常正現的W3C論DOM方法，與FF的DOMMouseScroll 不一樣，基本上所有非IE內核的瀏覽器***版都支持它了。IE下我們可以通過偵聽document. documentElement. doScroll()來判斷DOM樹是否完成，原理是IE下只有當DOM樹構建完成后才能doScroll。但它還不是盡善盡美，它在IE下無法判定iframe的內容是否加載完畢。我們繼續改進它。

(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.$ = $;  
})()  

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

(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函數使用
3. JavaScript 2.0新特性搶先看 向經典語言靠近
4. 開源語言排行榜：PHP與JavaScript受青睞
5. ASP.NET控件開發之UpdatePanel觸發JavaScript腳本技巧