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

  1. 直接在 HTML 中编写:

    <body onload="functionA();functionB()">

    由于事件包含在 HTML 内，不符合上述『内容与行为分离』的思想，故不推荐使用这个方法。

  2. 创建一个匿名函数容纳需要调用的方法，然后将该匿名函数绑定到 onload 事件上：

    window.onload = function () {
    
  functionA();
    
  functionB();
    
}

    在需要调用的函数不是太多的时候，这是最简单的解决方案了。

  3. 当需要调用的方法较多时，我们可以进一步优化，编写一个专门用于绑定 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);

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

参考：

JavaScript 中 onload 事件绑定多个方法的优化建议的更多相关文章

  1. JavaScript 中 onload 事件绑定多个方法

    当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...

  2. 理解Javascript中的事件绑定与事件委托

    最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定   ...

  3. javascript中onload事件如何绑定及执行顺序

    onload事件,顾名思义就是为了js程序能够在网页加载成功过后进行执行.对于放在head里面的js来说,非常必要. 如何给网页绑定onload,主要有三种方式: window.onload=func ...

  4. JavaScript 中 OnLoad事件用法总结

    还差一天现在手头上的这套网站就写完了,中午蹭了半天还是没睡好,干脆爬起来把今天上午写到的onload事件给整理一下. 一般用到比较多的就是初始化数据或者效果. 1.直接写在<body>标签 ...

  5. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  6. Javascript中常用事件集合和事件使用方法

    Javascript中常用事件集合和事件使用方法 一.事件绑定 格式: 事件源 . on事件类型=事件处理函数 事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...

  7. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  8. javascript中onclick事件能调用多个方法吗

    Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了

  9. JS 中的事件绑定、事件监听、事件委托

    事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...

随机推荐

  1. 开源jabber(XMPP)架设内部即时通讯服务的解决方案

    Jabber 是著名的即时通讯服务服务器,它是一个自由开源软件,能让用户自己架即时通讯服务器,可以在Internet上应用,也可以在局域网中应用.    XMPP(可扩展消息处理现场协议)是基于可扩展 ...

  2. Win7删除虚拟机新建的用户怎么恢复

    11月3日 VMware Workstation 7 Installed in Windows 7 AutoLogon Problem 安装VMware Workstation 7 在Windows ...

  3. DNS、bind 953端口

    1.953端口是rndc 的端口 2.rndc是监控bind的统计数据用的,同时不需要为了更新某个zone而重启bind 3.输入rndc ,如果ok的话,是这样的 4.看到第一条语句了没. 不需要重 ...

  4. 浅谈JavaScript变量声明提升

    前段时间阿里实习生内推,一面就被刷了,也是郁闷.今天系统给发通知,大致意思就是内推环节不足以了解彼此,还可以参加笔试,于是赶紧再投一次.官网流程显示笔试时间3月31日,时间快到了,开始刷题.网上搜了一 ...

  5. 02-1设置第一启动项--电脑怎么进入BIOS的方法集合

    电脑怎么进入BIOS的方法集合 很多时候为了对电脑进行相关设置,我们必须进入电脑的bios界面,但是不同的电脑进入bios的方法各不相同,小编今天就在这儿将各种电脑进入bios的方法汇总一下,希望对你 ...

  6. Devops成功的八大炫酷工具

    原文链接:http://www.infoworld.com/article/3031009/devops/8-more-cool-tools-for-devops-success.html 为自动化和 ...

  7. 结合jquery的前后端加密解密 适用于WebApi的SQL注入过滤器 Web.config中customErrors异常信息配置 ife2018 零基础学院 day 4 ife2018 零基础学院 day 3 ife 零基础学院 day 2 ife 零基础学院 day 1 - 我为什么想学前端

    在一个正常的项目中,登录注册的密码是密文传输到后台服务端的,也就是说,首先前端js对密码做处理,随后再传递到服务端,服务端解密再加密传出到数据库里面.Dotnet已经提供了RSA算法的加解密类库,我们 ...

  8. Spring 应用外部属性文件 配置 context 错误

    在Spring配置文件中出现通配符的匹配很全面, 但无法找到元素 'context:property-placeholder' 的声明这个错误,其实主要是我们在引入命名空间时没有正确引入它的DTD解析 ...

  9. linux下的3种DDOS软件介绍

    什么是TFN2K? TFN2K 的作者是著名的德国黑客mixter. http://mixter.void.ru/papers.html TFN2K通过主控端利用大量代理端主机的资源进行对一个或多个目 ...

  10. foxmail 客户端 LOGIN Login error password error

    显示这个错误是我在更换电脑时,将E:\Foxmail 7.2\Storage\15167136106@163.com 账户 移动到新的电脑上,并在新电脑上创建用户,总是报:账户或密码错误 我输入的密码 ...