JavaScript 中 onload 事件绑定多个方法的优化建议-优快云博客

本文深入探讨了网页加载完毕时触发的onload事件，讲解了如何使用JavaScript进行事件处理，包括单个和多个函数的调用，以及一种优化的事件绑定方法，确保内容与行为分离，提高代码可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面加载完毕时会触发 onload 事件。基于内容（HTML）要与行为（JavaScript）分离的编码思想，我们需要将一些对页面的初始化操作写在方法内，并通过window.onload = functionName 调用这些方法.
需要调用多个方法时，若使用 window.onload = functionA; window.onload = functionB;，它们之中只有最后一个方法会被实际调用。那么应如何实现调用多个方法呢？

直接在 HTML 中编写:
```
<body οnlοad="functionA();functionB()">
```
由于事件包含在 HTML 内，不符合上述『内容与行为分离』的思想，故不推荐使用这个方法。
创建一个匿名函数容纳需要调用的方法，然后将该匿名函数绑定到 onload 事件上：
```
window.onload = function () {
  functionA();
  functionB();
}
```
在需要调用的函数不是太多的时候，这是最简单的解决方案了。

当需要调用的方法较多时，我们可以进一步优化，编写一个专门用于绑定 onload事件的方法：

function addLoadEvent(func) {
    //把现有的 window.onload 事件处理函数的值存入变量
    var oldOnload = window.onload;
    if (typeof window.onload != "function") {
      //如果这个处理函数还没有绑定任何函数，就像平时那样添加新函数
      window.onload = func;
    } else {
      //如果处理函数已经绑定了一些函数，就把新函数添加到末尾
      window.onload = function() {
        oldOnload();
        func();
      }
    }
  }
  
  //接下来，我们只需要调用这个方法添加自己需要的函数就行了
  addLoadEvent(functionA);
  addLoadEvent(functionB);

现在不管代码变得多么复杂，当我们需要在页面加载完毕时调用多少函数，只需要多写一条语句既可解决。

转载于:https://www.cnblogs.com/douglasvegas/p/4864691.html