有关JavaScript事件加载的一些延伸思考

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脚本技巧