标签：onload 绑定 函数 addLoadEvent -- DOM window 加载
6.3.2 共享onload 事件
我必须执行prepareGallery 函数才能对onclick 事件进行绑定。
如果马上执行这个函数，它将无法完成其工作。如果在HTML文档完成加载之前执行脚本，此时DOM是不完整的。具体到prepareGallery 函数，它的第3行代码将测试"imagegallery" 元素是否存在，如果 DOM不完整，这项测试的准确性就无从谈起，事态的发展就会偏离我 的计划。
应该让这个函数在网页加载完毕之后立刻执行。网页加载完毕时会触发 一个onload 事件，这个事件与window 对象相关联。为了让事态的发展不偏离计划，必须把prepareGallery 函数绑定到这个事件上：
window.onload = prepareGallery;
它解决了我的问题，但像现在这样还不够完美。
假设我有两个函数：firstFunction 和secondFunction 。如果想让 它们俩都在页面加载时得到执行，我该怎么办？如果把它们逐一绑定 到onload 事件上，它们当中将只有最后那个才会被实际执行：
window.onload = firstFunction;
window.onload = secondFunction;
secondFunction 将取代firstFunction 。你可能会想：每个事件处 理函数只能绑定一条指令。
有一种办法可以让我避过这一难题：可以先创建一个匿名函数来容纳这两个函数，然后把那个匿名函数绑定到onload 事件上，如下所示：
window.onload = function() {
firstFunction();
secondFunction();
}
它确实能很好地工作——在需要绑定的函数不是很多的场合，这应该是 最简单的解决方案了。
这里还有一个弹性最佳的解决方案——不管你打算在页面加载完毕时执 行多少个函数，它都可以应付自如。这个方案需要额外编写一些代码， 但好处是一旦有了那些代码，把函数绑定到window.onload 事件就非常易行了。
这个函数的名字是addLoadEvent ，它是由Simon Willison（详见 http://simon.incutio.com ）编写的。它只有一个参数：打算在页面加载完 毕时执行的函数的名字。
下面是addLoadEvent 函数将要完成的操作。
-
把现有的window.onload 事件处理函数的值存入变量oldonload
-
如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它。
-
如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现 有指令的末尾。
下面是addLoadEvent 函数的代码清单：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
这将把那些在页面加载完毕时执行的函数创建为一个队列。如果想把刚才那两个函数添加到这个队列里去，只需写出以下代码就行了：
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
我发现这个函数非常实用，尤其是在代码变得越来越复杂的时候。无论 打算在页面加载完毕时执行多少个函数，只要多写一条语句就可以安排 好一切。
这个解决方案对prepareGallery 函数来说好像有点儿大材小用，因为 只有这一个函数需要在页面加载完毕时执行。可是，为以后的扩展做一 些准备工作总不是件坏事。我决定把addLoadEvent 函数收录到我的脚 本里，这使我只需写出下面这行代码就可以了：
addLoadEvent(prepareGallery);
参考目录
绝大多数内容来自于：JavaScript DOM编程艺术 （第2版) 作者:作者：[英] Jeremy Keith [加] Jeffrey Sambells 著 译者：杨涛 王建桥 杨晓云 等（第 6 章 案例研究：图片库改进版）
标签：onload,绑定,函数,addLoadEvent,--,DOM,window,加载 来源： https://blog.csdn.net/norang/article/details/117629715
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。