通常來說，window.onload就夠用了，如果想加載多個事件，我們可以采取以下方式：
window.onload = function(){
func1();
func2();
func3();
//更多加載事件………………
}
但如果由于某種特殊需要，我們不能合在一起寫嗎？如當前區域是面向管理員，后臺生成頁面時只有當用戶是管理員，頁面才生成這部分，而這部分也用到一些特殊的腳本，上面的方法就歇菜了！
//后臺代碼
<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.$ = $;
})()
不過像這個如此有名的函數其實還有一個缺陷，就是新加載的函數被放置于前一個加載函數的作用域之用，加載函數越多，其棧的層次越深，顯然性能耗很大。不過像onclick,onload,onmouseout等這樣函數，W3C把它們歸屬于DOM0的事件模型，好處是適用范圍廣，但簽于其性能，于是又提出DOM1.0的事件模型與DOM2.0的事件模型，DOM2就是原微軟的事件模型與原網景的事件模型的合璧，既能捕獲又能冒泡，而且多綁定多類型事件而不會導致后者覆蓋前者。于是人們總搞出了有名的addEvent函數出來，我們用addEvent來改造我們的事件加載。
(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.$ = $;
})()
