javaScriptRoadmap
来源:互联网 发布:迪杰斯特拉算法流程 编辑:程序博客网 时间:2024/06/09 05:57
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 :))