javascript 事件載入與預先載入

通常來說，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.$ = $;
})()

dir="ltr" lang="zh-CN">

Test