页面加载完毕时会触发 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. Android Gradle基础实践

    1,gradle是全新的一种IDE编程环境,Android Studio集成了Gradle IDE 2,要下载gradle(比方gradle-2.10)解压.配置环境变量.比方G:\Program   ...

  2. nodejs - 根据用户地址不同 返回不同数据

    年前忙疯了  之前写连续上班12天的时候 感觉自己太天真了 年前连续上班20天  真心苦逼成狗 好几次晚上12点到家 然后 最近 也灭有学习太多 就是项目上的 事情 真心忙啊 简单写了一段 Nodej ...

  3. react-native 项目实战 -- 新闻客户端（6） -- 完善ListView头部视图

    1.因为需要定时器,所以我们要cd到当前项目根目录下安装这个类库: $ npm i react-timer-mixin --save 2.Component/ScrollImage.js /** * ...

  4. linux 命令笔记: iptables

    配置虚拟机网卡 NAT 联网: iptables -t nat -A POSTROUTING -s 192.168.0.0/16 -j MASQUERADE iptables -A FROWARD - ...

  5. cisco 为每个单独的人员设置不同的用户名和密码

    cisco 为每个单独的人员设置不同的用户名和密码 2010-12-15 17:00:16 分类: 系统运维 Router1#configure terminalEnter configuration ...

  6. （二）Thymeleaf标准表达式之——简单表达式

    2. 标准表达式(Standard Expression Syntax) 标准表达式包含以下几个方面: 简单表达式: 变量表达式: ${...} 选择变量表达式: *{...} 消息表达式: #{.. ...

  7. js从$scope外部调用$scope内部函数，跨js调用非全局函数

    scope内部函数定义 //定位 $scope.LocateByPoint = function (x,y) { if(!x || !y) { window.alert("GPS坐标不存在, ...

  8. SVN服务端的安装搭建(Linux)

    在CentOS下安装 SVN 大多数 GNU/Linux 发行版系统自带了Subversion ,所以它很有可能已经安装在你的系统上了.可以使用下面命令检查是否安装了. svn --version 如 ...

  9. angularjs2中的非父子组件的通信

    AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传 ...

  10. poj 2553 The Bottom of a Graph（强连通、缩点、出入度）

    题意:给出一个有向图G,寻找所有的sink点.“sink”的定义为:{v∈V|∀w∈V:(v→w)⇒(w→v)},对于一个点v,所有能到达的所有节点w,都能够回到v,这样的点v称为sink. 分析:由 ...