前言
有些函数，必须在网页加载完毕后执行。比如：涉及DOM操作的。
网页加载完毕时会触发一个onload事件，将函数绑定到这个事件上即可。
复制代码 代码如下:
[removed] = myFunction;
问题来了：如果需要同时绑定多个事件，该如何处理呢？有两种解决方法
方案一
创建一个匿名函数，来容纳需要绑定的多个事件，再讲这个匿名函数绑定到onload事件上
[removed] = function(){
firstFunction();
secondFunction();
......
}
方案二
由Simon Willsion编写的addLoadEvent函数：
在网页开发中，确保某些函数在页面加载完成后执行是非常常见的需求，这通常涉及到对DOM（文档对象模型）的操作。当网页加载完成时，浏览器会触发一个名为`onload`的事件，开发人员可以将需要执行的函数绑定到这个事件上。然而，如果存在多个函数需要在页面加载后执行，应该如何处理呢？这里我们将详细讨论两种解决方案。
**方案一：匿名函数包裹法**
最直观的解决方法是创建一个匿名函数，这个匿名函数内部调用所有需要执行的函数，然后将这个匿名函数绑定到`onload`事件上。例如：
```javascript
window.onload = function() {
firstFunction();
secondFunction();
// 更多需要执行的函数...
};
```
在这个例子中，`firstFunction`和`secondFunction`会在页面加载完成后依次执行。这种方法简单明了，但缺点在于如果已经有其他函数被绑定到`onload`事件，新的匿名函数将会覆盖原有的绑定，导致原有的函数不再执行。
**方案二：Simon Willsion的`addLoadEvent`函数**
为了解决方案一中的问题，Simon Willsion提出了一种更灵活的策略，即`addLoadEvent`函数。这个函数允许我们向`onload`事件添加多个处理函数，而不会覆盖已有的绑定。`addLoadEvent`函数的工作原理如下：
```javascript
function addLoadEvent(func) {
var oldOnload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldOnload();
func();
};
}
}
```
- `addLoadEvent`会检查当前`window.onload`是否已经有一个处理函数（即`typeof window.onload != 'function'`）。如果没有，就直接将新函数`func`赋值给`onload`。
- 如果`onload`已经有了处理函数，那么创建一个新的匿名函数，这个匿名函数在执行原有`onload`函数之后再执行新添加的`func`。
这样，每次调用`addLoadEvent`，新函数都会被正确地添加到`onload`事件的处理链中，确保所有函数都能按预期执行。使用这个函数的例子如下：
```javascript
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
```
通过这两种方式，我们可以有效地处理多个函数在页面加载完成后执行的需求。无论你是初学者还是有经验的开发者，理解这些解决方案对于编写更高效、更可维护的JavaScript代码都是非常有益的。在实际项目中，根据具体情况选择适合的方案，可以使代码更加灵活且避免不必要的错误。
