1.window.onload = function(){
2. func1();
3. func2();
4. func3();
5. //更多加载事件………………
6.}
但如果由于某种特殊需要，我们不能合在一起写吗？如当前区域是面向管理员，后台生成页面时只有当用户是管理员，页面才生成这部分，而这部分也用到一些特殊的脚本，上面的方法就歇菜了！
01.//后台代码
02.<script type="text/javascript">
03. window.onload = function(){
04. func1();
05. func2();
06. //加载普通用户用到的脚本……
07. }
08.</script>
09.<%# 以下脚本是为管理员准备的 %>
10.<% if @user.role == "manager" %>
11. window.onload = function(){
12. func1();
13. func2();
14. //加载机密脚本……
15. }
16.<% end %>
这种情况生成出来的页面拥有两个window.onload代码块，很显然，第二个覆盖掉第一个。这时，轮到loadEvent函数出场了。
01.var loadEvent = function(fn) {
02. var oldonload = window.onload;
03. if (typeof window.onload != 'function') {
04. window.onload = fn;
05. }else {
06. window.onload = function() {
07. oldonload();
08. fn();
09. }
10. }
11.}
它非常完美地解决了互相覆盖的问题，用法如下：
1.loadEvent(func1);
2.loadEvent(func2);
3.loadEvent(func3);
4.//更多加载事件
但现实的问题总是如此出奇不意，也如此刁钻邪门。最近我想把所有的函数放到一个闭包中，以免除命名冲突之苦，比如那个有名的$的DOM选择器。JQuery，Prototype，mootool都用它做选择器的名字，共存成了个严重的问题。
01.(function(){
02. if(!window.JS){
03. window['JS'] = {}
04. }
05. var onReady = function(fn){
06. var oldonload = window.onload;
07. if (typeof window.onload != 'function') {
08. window.onload = fn;
09. }else {
10. window.onload = function() {
11. oldonload();
12. fn();
13. }
14. }
15. }
16. JS.onReady = onReady;
17. var $ = function(id){
18. return document.getElementById(id);
19. }
20. JS.$ = $;
21.})()
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
不过像这个如此有名的函数其实还有一个缺陷，就是新加载的函数被放置于前一个加载函数的作用域之用，加载函数越多，其栈的层次越深，显然性能耗很大。不过像onclick,onload,onmouseout等这样函数，W3C把它们归属于DOM0的事件模型，好处是适用范围广，但签于其性能，于是又提出DOM1.0的事件模型与DOM2.0的事件模型，DOM2就是原微软的事件模型与原网景的事件模型的合璧，既能捕获又能冒泡，而且多绑定多类型事件而不会导致后者覆盖前者。于是人们总搞出了有名的addEvent函数出来，我们用addEvent来改造我们的事件加载。
01.(function(){
02. if(!window.JS){
03. window['JS'] = {}
04. }
05. var addEvent = function( obj, type, fn ) {
06. if (obj.addEventListener)
07. obj.addEventListener( type, fn, false );
08. else if (obj.attachEvent) {
09. obj["e"+type+fn] = fn;
10. obj.attachEvent( "on"+type, function() {
11. obj["e"+type+fn]();
12. } );
13. }
14. };
15. var onReady = function(loadEvent,waitForImages) {
16. if(waitForImages) {
17. return addEvent(window, 'load', loadEvent);
18. }
19. }
20. JS.onReady = onReady;
21. var $ = function(id){
22. return document.getElementById(id);
23. }
24. JS.$ = $;
25.})()
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
OK，没问题。上面的onReady函数有一个可选参数，用于是否待图片加载。我们知道JS引擎会在完成DOM树后才开始处理图片与音频等东西，但如果我们的页面严重依赖于脚本布局呢？！我们想尽快让页面呈现出大体形态，这就用到domReady了。我们在原基础上改进它。
01.(function(){
02. if(!window.JS){
03. window['JS'] = {}
04. }
05. var addEvent = function( obj, type, fn ) {
06. if (obj.addEventListener)
07. obj.addEventListener( type, fn, false );
08. else if (obj.attachEvent) {
09. obj["e"+type+fn] = fn;
10. obj.attachEvent( "on"+type, function() {
11. obj["e"+type+fn]();
12. } );
13. }
14. };
15. var onReady = function(loadEvent,waitForImages) {
16. if(waitForImages) {
17. return addEvent(window, 'load', loadEvent);
18. }
19. var init = function() {
20. if (arguments.callee.done) return;
21. arguments.callee.done = true;
22. loadEvent.apply(document,arguments);
23. };
24. if(!+"v1"){
25. (function(){
26. try {
27. document.documentElement.doScroll("left");
28. } catch(e) {
29. setTimeout( arguments.callee, 0 );
30. return;
31. }
32. init();
33. })();
34. }else{
35. document.addEventListener( "DOMContentLoaded", function(){
36. document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
37. init();
38. }, false );
39. }
40. return true;
41. }
42. JS.onReady = onReady;
43. var $ = function(id){
44. return document.getElementById(id);
45. }
46. JS.$ = $;
47.})()
dom标准浏览器用DOMContentLoaded，这是非常正现的W3C论DOM方法，与FF的DOMMouseScroll 不一样，基本上所有非IE内核的浏览器最新版都支持它了。IE下我们可以通过侦听document. documentElement. doScroll()来判断DOM树是否完成，原理是IE下只有当DOM树构建完成后才能doScroll。但它还不是尽善尽美，它在IE下无法判定iframe的内容是否加载完毕。我们继续改进它。
01.(function(){
02. if(!window.JS){
03. window['JS'] = {}
04. }
05. var addEvent = function( obj, type, fn ) {
06. if (obj.addEventListener)
07. obj.addEventListener( type, fn, false );
08. else if (obj.attachEvent) {
09. obj["e"+type+fn] = fn;
10. obj.attachEvent( "on"+type, function() {
11. obj["e"+type+fn]();
12. } );
13. }
14. };
15. var onReady = function(loadEvent,waitForImages) {
16. if(waitForImages) {
17. return addEvent(window, 'load', loadEvent);
18. }
19. var init = function() {
20. if (arguments.callee.done) return;
21. arguments.callee.done = true;
22. loadEvent.apply(document,arguments);
23. };
24. if(!+"v1"){
25. if(window.self == window.top){
26. (function(){
27. try {
28. document.documentElement.doScroll("left");
29. } catch(e) {
30. setTimeout( arguments.callee, 0 );
31. return;
32. }
33. init();
34. })();
35. }else{
36. document.attachEvent("onreadystatechange", function(){
37. if ( document.readyState === "complete" ) {
38. document.detachEvent( "onreadystatechange", arguments.callee );
39. init();
40. }
41. });
42. }
43. }else{
44. document.addEventListener( "DOMContentLoaded", function(){
45. document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
46. init();
47. }, false );
48. }
49. return true;
50. }
51. JS.onReady = onReady;
52. var $ = function(id){
53. return document.getElementById(id);
54. }
55. JS.$ = $;
56.})()
我们简直是在重新实现jquery的$(document).ready(function(){ })！它功能非常强悍，配合利用闭包做成的命名空间，基本刀枪不入。而且它就只污染一个全局变量“JS”，可以与YUI媲美了（笑）。不过对于一般应用来说，我们用不着做到如此面面俱到。假如我们不需要对图片进行处理，页面也没有iframe，我们可以搞下面这个微缩版出来。
01.(function(){
02. if(!window.JS){
03. window['JS'] = {}
04. }
05. var onReady = function(loadEvent) {
06. if(!+"v1"){
07. (function(){
08. try {
09. document.documentElement.doScroll("left");
10. } catch(e) {
11. setTimeout( arguments.callee, 0 );
12. return;
13. }
14. loadEvent();
15. })();
16. }else{
17. document.addEventListener( "DOMContentLoaded", loadEvent, false );
18. }
19. }
20. JS.onReady = onReady;
21. var $ = function(id){
22. return document.getElementById(id);
23. }
24. JS.$ = $;
25.})()
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]