有關(guān)JavaScript事件加載的一些延伸思考

作者：rubylouvre 2009-08-27 11:02:22

本文對JavaScript事件加載進(jìn)行了一些延伸思考。加載多個事件時，使用window.onload可能會導(dǎo)致一些不便，而通過偵聽器等方法，則可以解決這些問題。

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

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

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

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

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

這種情況生成出來的頁面擁有兩個window.onload代碼塊，很顯然，第二個覆蓋掉***個。這時，輪到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ù)放到一個閉包中，以免除命名沖突之苦，比如那個有名的$的DOM選擇器。JQuery，Prototype，mootool都用它做選擇器的名字，共存成了個嚴(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.$ = $;  
})()

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

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

【編輯推薦】

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

責(zé)任編輯：yangsai 來源： rubylouvre的博客

JavaScript事件加載