js事件加载

本文对JavaScript事件加载进行了一些延伸思考。加载多个事件时，使用window.onload可能会导致一些不便，而通过侦听器等方法，则可以解决这些问题。 JavaScript事件加载本身并不是什么复杂的功能，通常来说，window.onload就够用了。如果想加载多个事件，我们可以采取以下方式： 1. window.onload = function(){ 2. func1(); 3. func2(); 4. func3(); 5. //更多加载事件……………… 6. } 但如果由于某种特殊需要，我们不能合在一起写吗？如当前区域是面向管理员，后台生成页面时只有当用户是管理员，页面才生成这部分，而这部分也用到一些特殊的脚本，上面的方法就歇菜了！ JavaScript事件加载：前台与后台的尴尬 1. //后台代码 2. < script type="text/javascript"> 3. window.onload = function(){ 4. func1(); 5. func2(); 6. //加载普通用户用到的脚本…… 7. } 8. < /script> 9. < %# 以下脚本是为管理员准备的 %> 10. < % if @user.role == "manager" %> 11. window.onload = function(){ 12. func1(); 13. func2(); 14. //加载机密脚本…… 15. } 16. < % end %> 这种情况生成出来的页面拥有两个window.onload代码块，很显然，第二个覆盖掉第一个。这时，轮到loadEvent函数出场了。 1. var loadEvent = function(fn) { 2. var oldonload = window.onload; 3. if (typeof window.onload != 'function') { 4. window.onload = fn; 5. }else { 6. window.onload = function() { 7. oldonload(); 8. fn(); 9. } 10. } 11. } 它非常完美地解决了互相覆盖的问题，用法如下： 1. loadEvent(func1); 2. loadEvent(func2); 3. loadEvent(func3); 4. //更多加载事件 但现实的问题总是如此出奇不意，也如此刁钻邪门。最近我想把所有的函数放到一个闭包中，以免除命名冲突之苦，比如那个有名的$的DOM选择器。JQuery，Prototype，mootool都用它做选择器的名字，共存成了个严重的问题。 1. (function(){ 2. if(!window.JS){ 3. window['JS'] = {} 4. } 5. var onReady = function(fn){ 6. var oldonload = window.onload; 7. if (typeof window.onload != 'function') { 8. window.onload = fn; 9. }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. })() 22. 报错，说找不到节点。为什么找不到呢？因为我们在调用它的时候，DOM树还没有建立起来！不会吧，网页是如此完整地显示我们眼前了。这与闭包的运作有关，当JS引擎解析到闭包的最后一个“}”，就把里面的东西锁到一个密封的环境中，JS继续向下执行，就修正不了闭包中的window的属性了。 window有一个出名的属性，叫做document，它引用着整个DOM树(当然还有其他操作)。DOM树是一个复杂的键值对，当JS不断向下解析时，就不断往document添加相应的节点。但当它塞进闭包后，里面的时间就静止了，因此它还停留在解析head的阶段，document是残缺的，想获取 body中的节点，当然是返回null了。于是问题的关键是如何让闭包内的document重新继续向下解析。 方法有两个，一个是利用侦听器(addEventListener与attachEvent)，一个是利用基于时间轴的setTimeout与 setInterval。 1. (function(){ 2. if(!window.JS){ 3. window['JS'] = {} 4. } 5. var addEvent = function( obj, type, fn ) { 6. if (obj.addEventListener) 7. obj.addEventListener( type, fn, false ); 8. else if (obj.attachEvent) { 9. 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. })() 26. OK，没问题。上面的onReady函数有一个可选参数，判断图片是否加载完毕。我们知道JS引擎会在完成DOM树后才开始处理图片与音频等东西，但如果我们的页面严重依赖于脚本布局呢？！我们想尽快让页面呈现出大体形态，这就用到domReady了。我们在原基础上改进它。 1. (function(){ 2. if(!window.JS){ 3. window['JS'] = {} 4. } 5. var addEvent = function( obj, type, fn ) { 6. if (obj.addEventListener) 7. obj.addEventListener( type, fn, false ); 8. else if (obj.attachEvent) { 9. 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的内容是否加载完毕。我们继续改进它。 1. (function(){ 2. if(!window.JS){ 3. window['JS'] = {} 4. } 5. var addEvent = function( obj, type, fn ) { 6. if (obj.addEventListener) 7. obj.addEventListener( type, fn, false ); 8. else if (obj.attachEvent) { 9. 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，我们可以搞下面这个微缩版出来。 1. (function(){ 2. if(!window.JS){ 3. window['JS'] = {} 4. } 5. var onReady = function(loadEvent) { 6. if(!+"/v1"){ 7. (function(){ 8. try { 9. 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. })() 26. 以上就是对JavaScript事件加载的一些延伸思考。本文来自rubylouvre的博客：《javascript的事件加载》

 

 

--------------------------------------------------------------------------------

 

3、简单的实现方法
讲init()放在页面尾部即可。

<div class = "foot" > ...</ div > <script type = "text/javascript" > unit();</ script >

总结：为了规范页面的js中的所有应用函数，需要养成良好的习惯，给程序一个统一的入口及初始化函数。这样就不会出现脚本存在于页面的角角落落，不宜修改、管理、再引用等问题