javaScriptRoadmap

最新推荐文章于 2024-04-11 09:45:26 发布

原创最新推荐文章于 2024-04-11 09:45:26 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom #函数

web-dev 专栏收录该内容

1 篇文章

订阅专栏

本文详细解释了addLoadEvent函数的工作原理，解答了为何多个函数绑定到window.onload时，只有最后一个函数直接绑定，而其余函数则通过递归方式被调用的问题。

addLoadEvent()函数浅谈

初学DOM，对这个函数不是很理解，后来上网查阅资料，终于有些明白了，下面我会提出我曾经产生的疑惑和自己的见解。
以下为函数本身：

  function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = func;
    } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(function_001);
addLoadEvent(function_002);

我的疑惑点有两个：
1.window.onload有什么用？
2.function_001应该执行了两次，为什么实际只执行了一次呢？

第一个问题，具体可以参考开发者文档https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
简单来说，window.onload是一个事件处理程序，当所有的文件（document）载入DOM，所有的图像、脚本（script）、链接都加载完毕后，这个程序将会被触发。
**

重要的一点是：window.onload只能绑定唯一一条指令!!!

因此，这样的表示要避免：

window.onload=firstFunction();
window.onload=secondFunction();
/*带所有文档加载完毕后，只执行secondFunction()函数*/

而这样的表示是正确合理的：

window.onload=function（）{
  firstFunction();
  secondFunction();
}
/*在这里,window.onload只绑定一个无名函数‘function（）’*/

所以出现了addLoadEvent（）函数，目的是为了当文档加载完毕后，能够优雅并且方便地执行许多互相独立的函数。

第二个问题，为什么function_001只执行了一次，而不是两次呢？
请再仔细看这句话：

window.onload只能绑定唯一一条指令!!!

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = func;
    } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(function_001);
addLoadEvent(function_002);

当执行addLoadEvent(function_001)时，函数内部执行的语句是：

window.onload = func;

但是，因为后面还有需要加载的函数‘function_002’，所以window.onload最终绑定的并不是‘function_001’
因此，当执行addLoadEvent(function_001)时，函数‘function_001（）’并没有发挥作用。但是，他被保存到了‘oldonload’中
最后，执行addLoadEvent(function_002)，因为后面没有其他需要加载的函数了，所以，window.onload最后绑定的函数是：

function(){
  oldonload();
  func();
}
/*因此真正起作用的function（）里面的这些函数*/

所以，当有三个，四个。。。N个函数需要加载的时候，都可以调用addLoadEvent（）这个函数。

只要不是最后一个函数，其他函数最终都被保存到了‘oldonload’变量中去了。

我也不知道讲清楚了没有，总之比我之前看到的一些中文博客要更加清楚一些，如果各位还是不太明白的话，可以参考一下两个网站：

https://developer.mozilla.org/en-US/
http://simonwillison.net/
(PS.第二个网站需要翻墙或者更改hosts :))