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

JavaScript事件加载本身并不是什么复杂的功能，通常来说，window.onload就够用了。如果想加载多个事件，我们可以采取以下方式：

 
 
 
    
  
  
  
  1. window.onload = function(){  
    2. 
  
  
  
  2. func1();  
    3. 
  
  
  
  3. func2();  
    4. 
  
  
  
  4. func3();  
    5. 
  
  
  
  5. //更多加载事件………………  
    6. 
  
  
  
  6. }  
    7.

但如果由于某种特殊需要，我们不能合在一起写吗？如当前区域是面向管理员，后台生成页面时只有当用户是管理员，页面才生成这部分，而这部分也用到一些特殊的脚本，上面的方法就歇菜了！

JavaScript事件加载：前台与后台的尴尬

 
 
 
    
  
  
  
  1. //后台代码  
    2. 
  
  
  
  2. < script type="text/javascript">  
    3. 
  
  
  
  3. window.onload = function(){  
    4. 
  
  
  
  4. func1();  
    5. 
  
  
  
  5. func2();  
    6. 
  
  
  
  6. //加载普通用户用到的脚本……  
    7. 
  
  
  
  7. }  
    8. 
  
  
  
  8. < /script>  
    9. 
  
  
  
  9. < %# 以下脚本是为管理员准备的 %>  
    10. 
  
  
  
  10. < % if @user.role == "manager"   %>  
    11. 
  
  
  
  11. window.onload = function(){  
    12. 
  
  
  
  12. func1();  
    13. 
  
  
  
  13. func2();  
    14. 
  
  
  
  14. //加载机密脚本……  
    15. 
  
  
  
  15. }  
    16. 
  
  
  
  16. < % end %>  
    17.

这种情况生成出来的页面拥有两个window.onload代码块，很显然，第二个覆盖掉***个。这时，轮到loadEvent函数出场了。

 
 
 
    
  
  
  
  1. var loadEvent = function(fn) {  
    2. 
  
  
  
  2. var oldonload = window.onload;  
    3. 
  
  
  
  3. if (typeof window.onload != 'function') {  
    4. 
  
  
  
  4. window.onload = fn;  
    5. 
  
  
  
  5. }else {  
    6. 
  
  
  
  6. window.onload = function() {  
    7. 
  
  
  
  7. oldonload();  
    8. 
  
  
  
  8. fn();  
    9. 
  
  
  
  9. }  
    10. 
  
  
  
  10. }  
    11. 
  
  
  
  11. }  
    12.

它非常***地解决了互相覆盖的问题，用法如下：

 
 
 
    
  
  
  
  1. loadEvent(func1);  
    2. 
  
  
  
  2. loadEvent(func2);  
    3. 
  
  
  
  3. loadEvent(func3);  
    4. 
  
  
  
  4. //更多加载事件  
    5.

但现实的问题总是如此出奇不意，也如此刁钻邪门。最近我想把所有的函数放到一个闭包中，以免除命名冲突之苦，比如那个有名的$的DOM选择器。JQuery，Prototype，mootool都用它做选择器的名字，共存成了个严重的问题。

 
 
 
    
  
  
  
  1. (function(){  
    2. 
  
  
  
  2. if(!window.JS){  
    3. 
  
  
  
  3. window['JS'] = {}  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. var onReady = function(fn){  
    6. 
  
  
  
  6. var oldonload = window.onload;  
    7. 
  
  
  
  7. if (typeof window.onload != 'function') {  
    8. 
  
  
  
  8. window.onload = fn;  
    9. 
  
  
  
  9. }else {  
    10. 
  
  
  
  10. window.onload = function() {  
    11. 
  
  
  
  11. oldonload();  
    12. 
  
  
  
  12. fn();  
    13. 
  
  
  
  13. }  
    14. 
  
  
  
  14. }  
    15. 
  
  
  
  15. }  
    16. 
  
  
  
  16. JS.onReady = onReady;  
    17. 
  
  
  
  17. var $ = function(id){  
    18. 
  
  
  
  18. return document.getElementById(id);  
    19. 
  
  
  
  19. }  
    20. 
  
  
  
  20. JS.$ = $;  
    21. 
  
  
  
  21. })()  
    22. 
  
  
  
  22.  
    23.

报错，说找不到节点。为什么找不到呢？因为我们在调用它的时候，DOM树还没有建立起来！不会吧，网页是如此完整地显示我们眼前了。这与闭包的运作有关，当JS引擎解析到闭包的***一个“}”，就把里面的东西锁到一个密封的环境中，JS继续向下执行，就修正不了闭包中的window的属性了。window有一个出名的属性，叫做document，它引用着整个DOM树(当然还有其他操作)。DOM树是一个复杂的键值对，当JS不断向下解析时，就不断往document添加相应的节点。但当它塞进闭包后，里面的时间就静止了，因此它还停留在解析head的阶段，document是残缺的，想获取body中的节点，当然是返回null了。于是问题的关键是如何让闭包内的document重新继续向下解析。 方法有两个，一个是利用侦听器(addEventListener与attachEvent)，一个是利用基于时间轴的setTimeout与setInterval。

 
 
 
    
  
  
  
  1. (function(){  
    2. 
  
  
  
  2. if(!window.JS){  
    3. 
  
  
  
  3. window['JS'] = {}  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. var addEvent = function( obj, type, fn ) {  
    6. 
  
  
  
  6. if (obj.addEventListener)  
    7. 
  
  
  
  7. obj.addEventListener( type, fn, false );  
    8. 
  
  
  
  8. else if (obj.attachEvent) {  
    9. 
  
  
  
  9. obj["e"+type+fn] = fn;  
    10. 
  
  
  
  10. obj.attachEvent( "on"+type, function() {  
    11. 
  
  
  
  11. obj["e"+type+fn]();  
    12. 
  
  
  
  12. } );  
    13. 
  
  
  
  13. }  
    14. 
  
  
  
  14. };  
    15. 
  
  
  
  15. var onReady = function(loadEvent,waitForImages) {  
    16. 
  
  
  
  16. if(waitForImages) {  
    17. 
  
  
  
  17. return addEvent(window, 'load', loadEvent);  
    18. 
  
  
  
  18. }  
    19. 
  
  
  
  19. }  
    20. 
  
  
  
  20. JS.onReady = onReady;  
    21. 
  
  
  
  21. var $ = function(id){  
    22. 
  
  
  
  22. return document.getElementById(id);  
    23. 
  
  
  
  23. }  
    24. 
  
  
  
  24. JS.$ = $;  
    25. 
  
  
  
  25. })()  
    26. 
  
  
  
  26.  
    27.

OK，没问题。上面的onReady函数有一个可选参数，判断图片是否加载完毕。我们知道JS引擎会在完成DOM树后才开始处理图片与音频等东西，但如果我们的页面严重依赖于脚本布局呢？！我们想尽快让页面呈现出大体形态，这就用到domReady了。我们在原基础上改进它。

 
 
 
    
  
  
  
  1. (function(){  
    2. 
  
  
  
  2. if(!window.JS){  
    3. 
  
  
  
  3. window['JS'] = {}  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. var addEvent = function( obj, type, fn ) {  
    6. 
  
  
  
  6. if (obj.addEventListener)  
    7. 
  
  
  
  7. obj.addEventListener( type, fn, false );  
    8. 
  
  
  
  8. else if (obj.attachEvent) {  
    9. 
  
  
  
  9. obj["e"+type+fn] = fn;  
    10. 
  
  
  
  10. obj.attachEvent( "on"+type, function() {  
    11. 
  
  
  
  11. obj["e"+type+fn]();  
    12. 
  
  
  
  12. } );  
    13. 
  
  
  
  13. }  
    14. 
  
  
  
  14. };  
    15. 
  
  
  
  15. var onReady = function(loadEvent,waitForImages) {  
    16. 
  
  
  
  16. if(waitForImages) {  
    17. 
  
  
  
  17. return addEvent(window, 'load', loadEvent);  
    18. 
  
  
  
  18. }  
    19. 
  
  
  
  19. var init = function() {  
    20. 
  
  
  
  20. if (arguments.callee.done) return;  
    21. 
  
  
  
  21. arguments.callee.done = true;  
    22. 
  
  
  
  22. loadEvent.apply(document,arguments);  
    23. 
  
  
  
  23. };  
    24. 
  
  
  
  24. if(!+"\v1"){  
    25. 
  
  
  
  25. (function(){  
    26. 
  
  
  
  26. try {  
    27. 
  
  
  
  27. document.documentElement.doScroll("left");  
    28. 
  
  
  
  28. } catch(e) {  
    29. 
  
  
  
  29. setTimeout( arguments.callee, 0 );  
    30. 
  
  
  
  30. return;  
    31. 
  
  
  
  31. }  
    32. 
  
  
  
  32. init();  
    33. 
  
  
  
  33. })();  
    34. 
  
  
  
  34. }else{  
    35. 
  
  
  
  35. document.addEventListener( "DOMContentLoaded", function(){  
    36. 
  
  
  
  36. document.removeEventListener( "DOMContentLoaded", arguments.callee, false );  
    37. 
  
  
  
  37. init();  
    38. 
  
  
  
  38. }, false );  
    39. 
  
  
  
  39. }  
    40. 
  
  
  
  40. return true;  
    41. 
  
  
  
  41. }  
    42. 
  
  
  
  42. JS.onReady = onReady;  
    43. 
  
  
  
  43. var $ = function(id){  
    44. 
  
  
  
  44. return document.getElementById(id);  
    45. 
  
  
  
  45. }  
    46. 
  
  
  
  46. JS.$ = $;  
    47. 
  
  
  
  47. })()  
    48.

dom标准浏览器用DOMContentLoaded，这是非常正现的W3C论DOM方法，与FF的DOMMouseScroll 不一样，基本上所有非IE内核的浏览器***版都支持它了。IE下我们可以通过侦听document. documentElement. doScroll()来判断DOM树是否完成，原理是IE下只有当DOM树构建完成后才能doScroll。但它还不是尽善尽美，它在IE下无法判定iframe的内容是否加载完毕。我们继续改进它。

 
 
 
    
  
  
  
  1. (function(){  
    2. 
  
  
  
  2. if(!window.JS){  
    3. 
  
  
  
  3. window['JS'] = {}  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. var addEvent = function( obj, type, fn ) {  
    6. 
  
  
  
  6. if (obj.addEventListener)  
    7. 
  
  
  
  7. obj.addEventListener( type, fn, false );  
    8. 
  
  
  
  8. else if (obj.attachEvent) {  
    9. 
  
  
  
  9. obj["e"+type+fn] = fn;  
    10. 
  
  
  
  10. obj.attachEvent( "on"+type, function() {  
    11. 
  
  
  
  11. obj["e"+type+fn]();  
    12. 
  
  
  
  12. } );  
    13. 
  
  
  
  13. }  
    14. 
  
  
  
  14. };  
    15. 
  
  
  
  15. var onReady = function(loadEvent,waitForImages) {  
    16. 
  
  
  
  16. if(waitForImages) {  
    17. 
  
  
  
  17. return addEvent(window, 'load', loadEvent);  
    18. 
  
  
  
  18. }  
    19. 
  
  
  
  19. var init = function() {  
    20. 
  
  
  
  20. if (arguments.callee.done) return;  
    21. 
  
  
  
  21. arguments.callee.done = true;  
    22. 
  
  
  
  22. loadEvent.apply(document,arguments);  
    23. 
  
  
  
  23. };  
    24. 
  
  
  
  24. if(!+"\v1"){  
    25. 
  
  
  
  25. if(window.self == window.top){  
    26. 
  
  
  
  26. (function(){  
    27. 
  
  
  
  27. try {  
    28. 
  
  
  
  28. document.documentElement.doScroll("left");  
    29. 
  
  
  
  29. } catch(e) {  
    30. 
  
  
  
  30. setTimeout( arguments.callee, 0 );  
    31. 
  
  
  
  31. return;  
    32. 
  
  
  
  32. }  
    33. 
  
  
  
  33. init();  
    34. 
  
  
  
  34. })();  
    35. 
  
  
  
  35. }else{  
    36. 
  
  
  
  36. document.attachEvent("onreadystatechange", function(){  
    37. 
  
  
  
  37. if ( document.readyState === "complete" ) {  
    38. 
  
  
  
  38. document.detachEvent( "onreadystatechange", arguments.callee );  
    39. 
  
  
  
  39. init();  
    40. 
  
  
  
  40. }  
    41. 
  
  
  
  41. });  
    42. 
  
  
  
  42. }  
    43. 
  
  
  
  43. }else{  
    44. 
  
  
  
  44. document.addEventListener( "DOMContentLoaded", function(){  
    45. 
  
  
  
  45. document.removeEventListener( "DOMContentLoaded", arguments.callee, false );  
    46. 
  
  
  
  46. init();  
    47. 
  
  
  
  47. }, false );  
    48. 
  
  
  
  48. }  
    49. 
  
  
  
  49. return true;  
    50. 
  
  
  
  50. }  
    51. 
  
  
  
  51. JS.onReady = onReady;  
    52. 
  
  
  
  52. var $ = function(id){  
    53. 
  
  
  
  53. return document.getElementById(id);  
    54. 
  
  
  
  54. }  
    55. 
  
  
  
  55. JS.$ = $;  
    56. 
  
  
  
  56. })()  
    57.

我们简直是在重新实现jquery的$(document).ready(function(){ })！它功能非常强悍，配合利用闭包做成的命名空间，基本刀枪不入。而且它就只污染一个全局变量“JS”，可以与YUI媲美了（笑）。不过对于一般应用来说，我们用不着做到如此面面俱到。假如我们不需要对图片进行处理，页面也没有iframe，我们可以搞下面这个微缩版出来。

 
 
 
    
  
  
  
  1. (function(){  
    2. 
  
  
  
  2. if(!window.JS){  
    3. 
  
  
  
  3. window['JS'] = {}  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. var onReady = function(loadEvent) {  
    6. 
  
  
  
  6. if(!+"\v1"){  
    7. 
  
  
  
  7. (function(){  
    8. 
  
  
  
  8. try {  
    9. 
  
  
  
  9. document.documentElement.doScroll("left");  
    10. 
  
  
  
  10. } catch(e) {  
    11. 
  
  
  
  11. setTimeout( arguments.callee, 0 );  
    12. 
  
  
  
  12. return;  
    13. 
  
  
  
  13. }  
    14. 
  
  
  
  14. loadEvent();  
    15. 
  
  
  
  15. })();  
    16. 
  
  
  
  16. }else{  
    17. 
  
  
  
  17. document.addEventListener( "DOMContentLoaded", loadEvent, false );  
    18. 
  
  
  
  18. }  
    19. 
  
  
  
  19. }  
    20. 
  
  
  
  20. JS.onReady = onReady;  
    21. 
  
  
  
  21. var $ = function(id){  
    22. 
  
  
  
  22. return document.getElementById(id);  
    23. 
  
  
  
  23. }  
    24. 
  
  
  
  24. JS.$ = $;  
    25. 
  
  
  
  25. })()  
    26. 
  
  
  
  26.  
    27.

以上就是对JavaScript事件加载的一些延伸思考。本文来自rubylouvre的博客：《javascript的事件加载》

【编辑推荐】

  1. JavaScript使用心得汇总：从BOM和DOM谈起
  2. C# JavaScript函数使用
  3. JavaScript 2.0新特性抢先看 向经典语言靠近
  4. 开源语言排行榜：PHP与JavaScript受青睐
  5. ASP.NET控件开发之UpdatePanel触发JavaScript脚本技巧

网站题目：有关JavaScript事件加载的一些延伸思考
URL链接：http://www.shufengxianlan.com/qtweb/news21/355371.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站内链知识

分类信息网

移动网站建设　　 　橡塑保温材料　　 　成都网站建设　　 　手机软件开发　　 　乐山服务器托管　　 　医药医疗网站建设方案　　 　软文平台　　 　不锈钢防护栏　　 　成都众诚伟业　　 　重庆主机托管　　 　网站制作　　 　seo优化　　 　中国电信成都枢纽中心　　 　H5网站制作　　 　成都网站推广　　 　成都服务器租赁　　 　成发金汇　　 　成都外贸网站优化　　 　成都ssl证书申请　　 　青羊总部基地