[共同学习]贴段代码，大家来写执行结果，看谁理解更深刻,关于defer,attachEvent,window.onload....

很多人喜欢这样 <body onload="javascript:函数()">
但是当你的页面非常复杂的时候，
或者引入了别人的函数，script块的时候<script src=someone.js>
或者你又要添加新的功能，新的函数的时候，如果恰恰这些功能需要在页面加载完毕后调用，有没有考虑用什么方式实现呢。
如果最开始的代码用了<body onload="javascript:函数()">
你新加一个功能用 function window.onload(){}
而你的同事又要引如一个脚本块 <script src=someone.js>
恰好someone.js里面包含
<SCRIPT event=onload for=window language=JavaScript>
alert('eventfor...')
</SCRIPT> 如果这样的话，就有函数被打入冷宫了，在神不知鬼不觉的被屏蔽了。于是CSDN又多了一个新的帖子，
“我这个函数明明是好的，昨天调试都没问题，今天单独调试也ok,可怎么不执行啊"
那么最安全，最高效的处理方式是什么呢，大家一起来探讨

顺序实在写的差!!
代码有点意思!!
还能同时出现两个alert
normal.1
normal.2
the last one
defer1
defer2
eventfor...
attach2
attach1

呵呵，我的是没做之前发的，可以先拿我当反面教材拉，大家来教育我啊
我开始以为会把onload事件后执行的都把前面的覆盖掉
所以只写了一个onload事件触发的
还有我真搞不明白这两个defer的顺序。晕了

最安全最高效的方法是一个入口：function init(){
  init1();
  init2();
  init3();
  ......
}<body onload="init();>

我把我现在的思想总结下吧，其实楼主还少了一个
<script>window.onload=function(){alert('window.onload=')}</script>
首先看下attachEvent这个函数
JavaScript执行多个处理过程的方法
以前写 JavaScript 脚本时，事件都是采用object.event = handler;的方式初始化。这种方式对于 Internet Explorer、Mozilla/Firefox 和 Opera 来说很通用。但是有一个问题就是，这种方式只能一个事件对应一个事件处理过程。如果希望一个事件可以依次执行多个处理过程就不好用了。但是 Internet Explorer 从 5.0 开始提供了一个 attachEvent 方法，使用这个方法，就可以给一个事件指派多个处理过程了。attachEvent 对于目前的 Opera 也适用。但是问题是 Mozilla/Firefox 并不支持这个方法。但是它支持另一个 addEventListener 方法，这个方法跟 attachEvent 差不多，也是用来给一个事件指派多个处理过程的。但是它们指派的事件有些区别，在 attachEvent 方法中，事件是以 “on” 开头的，而在 addEventListener 中，事件没有开头的 “on”，另外 addEventListener 还有第三个参数，一般这个参数指定为 false 就可以了。
然后看下
<SCRIPT event=onload for=window language=JavaScript>
alert('eventfor...')
</SCRIPT>
这个（以下简称第1种），这个应该和<script>window.onload=function(){alert('window.onload=')}</script>（以下简称第2种）、<body onload>（以下简称第3种）这三个是一致的，只是那个在代码中把onload方法重写了下，所以只弹出eventfor，如果我们把第一种方法干掉，那么就会弹出第三种的结果了也就是说如果有了第1种的情况下，并且也包含第2种或第三种的情况下，第一种会被覆盖掉
还有两个defer的执行顺序，和两个attachEvent之间的顺序
我想这个应该是遇到了这两个东西就压入栈中，应该是这种实现方式，所以后写的会先执行，并且可以处理多个。
至于文件中间的就不用说了吧。:)

贡献一个代码修正：
if(!window.attachEvent && window.addEventListener)
{
  Window.prototype.attachEvent = HTMLDocument.prototype.attachEvent=
  HTMLElement.prototype.attachEvent=function(en, func, cancelBubble)
  {
    var cb = cancelBubble ? true : false;
    this.addEventListener(en.toLowerCase().substr(2), func, cb);
  };
}这样只要使用 attachEvent() 一种方法就可以在所有浏览器里被兼容执行了。

yyszh 理论上一个入口是最好的，省得麻烦。
但是有时候事情并不那么简单。比如一个公用的 public.js 或者其他js文件被几个页面调用 <script src=public.js>
如果public.js 里面本来就含有 <script event=window for=onload...那就麻烦了，要改public.js而且有时候页面改写，升级，添加新功能的时候换不同的人去写，各人编程风格不一。所以呢，最好在ie下面最好用
window.attachEvent
这个语句永远不会和别人冲突的，可以用多个 attach绑定多个函数。
但是要注意的是他的加载次序是后进先出的。比如下面
<script>
   var i=10
  window.attachEvent("onload",function(){alert(i+2)})
     ++i;
  window.attachEvent("onload",function(){alert(i*2)})
     ++i;
</script>弹出结果，先显示24,再显示14

meizz(梅花雪) 的方法不错不过让我写，我肯定会偷懒
var cb = cancelBubbe ? true : false; 这句我肯定不会判断，直接一个false
都窗口级的事件了，再往上冒泡也没什么意义了

1 normal.1
2 normal.2
3 body onload=...
4 eventfor...
5 defer1
6 defer2
7 the last one

to meizz(梅花雪) 为何下面的程序，没有任何反应呢？哪里错了？
<script>
if(!window.attachEvent && window.addEventListener)
{
  Window.prototype.attachEvent = HTMLDocument.prototype.attachEvent=
  HTMLElement.prototype.attachEvent=function(en, func, cancelBubble)
  {
    var cb = cancelBubble ? true : false;
    this.addEventListener(en.toLowerCase().substr(2), func, cb);
  };
}
function func(){alert('the last one');}
</script>

to meizz(梅花雪) <script>
if(!window.attachEvent && window.addEventListener)
{
  Window.prototype.attachEvent = HTMLDocument.prototype.attachEvent=
  HTMLElement.prototype.attachEvent=function(en, func, cancelBubble)
  {
    var cb = cancelBubble ? true : false;
    this.addEventListener(en.toLowerCase().substr(2), func, cb);
  };
}
</script>这个代码该怎么用？比如要触发onunload事件。

normal.1
normal.2
defer2
defer1
the last.one
evntfor
attach2
attach1
和我预想的基本一致不过不太明白 eventfor...和body onload=...为什么不出现
虽说
<SCRIPT event=onload for=window language=JavaScript>
alert('eventfor...')
</SCRIPT>
和
<body onload="javascript:alert('body onload=...')">
应该有一个被覆盖了，但另一个也还是应该有的

出现,attach1,attach2,normal.1,normai.2,eventfor...,body onload=...,the last one'window.onload' ,defer1,defer2,这三个不会出来.

只有'window.onload' 不会弹出...

不过我确实不明白javascript加载和执行顺序

晕,,我错的够多的...<SCRIPT event=onload for=window language=JavaScript>
alert('eventfor...')
</SCRIPT> 这么多种方法都没见过.........我觉得还是用常用的方法比较好.像DW, script默认的标签参数里不会有这样的代码提示的.

JK的结果：
normal.1
normal.2
the last onedefer1
defer2body onload=...
attach1
attach2
-----
后面的三个都错了
。

调用meizz的代码<script>
if(!window.attachEvent && window.addEventListener)
{
  Window.prototype.attachEvent = HTMLDocument.prototype.attachEvent=
  HTMLElement.prototype.attachEvent=function(en, func, cancelBubble)
  {
    var cb = cancelBubble ? true : false;
    this.addEventListener(en.toLowerCase().substr(2), func, cb);
  };
}window.attachEvent("onunload", function(){alert(88)});
</script>
这样就不用再写针对其它的浏览器兼容代码了

Binds the specified function to an event, so that the function gets called whenever the event fires on the object.SyntaxbSuccess = object.attachEvent(sEvent, fpNotify)
ParameterssEvent Required. String that specifies any of the standard DHTML Events.
fpNotify Required. Pointer that specifies the function to call when sEvent fires. Return ValueBoolean. Returns one of the following possible values:true The function was bound successfully to the event.
false The function was not bound to the event. ResWhen sEvent fires on the object, the object's sEvent handler is called before fpNotify , the specified function. If you attach multiple functions to the same event on the same object, the functions are called in random order, immediately after the object's event handler is called.
注意：这里说attachEvent调用函数时是随机顺序的，于是再加几个测试看看<html>
<script>
  window.attachEvent("onload",function(){alert('attach1')})
  window.attachEvent("onload",function(){alert('attach2')})
  window.attachEvent("onload",function(){alert('attach3')})
  window.attachEvent("onload",function(){alert('attach4')})
</script>
<script>function window.onload(){alert('window.onload')}</script>
<script>       alert('normal.1')  </script>
<script defer> alert('defer1')</script>
<script defer> alert('defer2')</script>
<script defer> alert('defer3')</script>
<script>       alert('normal.2')  </script><SCRIPT event=onload for=window language=JavaScript>
alert('eventfor...')
</SCRIPT><body  onload="javascript:alert('body onload=...')">
 
</body>
</html><script>alert('the last one')</script>结果很奇怪，defer也是类似的，另外对于event的调用会覆盖onload的调用也感觉比较奇怪，总之这个帖子不错

调试易

[共同学习]贴段代码，大家来写执行结果，看谁理解更深刻,关于defer,attachEvent,window.onload....

解决方案 »