JavaScript 中 onload 事件绑定多个方法的优化建议
页面加载完毕时会触发 onload 事件。基于内容（HTML）要与行为（JavaScript）分离的编码思想，我们需要将一些对页面的初始化操作写在方法内，并通过window.onload = functionName 调用这些方法.
需要调用多个方法时，若使用 window.onload = functionA; window.onload = functionB;，它们之中只有最后一个方法会被实际调用。那么应如何实现调用多个方法呢？
直接在 HTML 中编写:
<body onload="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);现在不管代码变得多么复杂，当我们需要在页面加载完毕时调用多少函数，只需要多写一条语句既可解决。
参考：
- 《JavaScript DOM 编程艺术（第二版）》
- Simon Willison's blog
JavaScript 中 onload 事件绑定多个方法的优化建议的更多相关文章
- JavaScript 中 onload 事件绑定多个方法
当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...
- 理解Javascript中的事件绑定与事件委托
最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定 ...
- javascript中onload事件如何绑定及执行顺序
onload事件,顾名思义就是为了js程序能够在网页加载成功过后进行执行.对于放在head里面的js来说,非常必要. 如何给网页绑定onload,主要有三种方式: window.onload=func ...
- JavaScript 中 OnLoad事件用法总结
还差一天现在手头上的这套网站就写完了,中午蹭了半天还是没睡好,干脆爬起来把今天上午写到的onload事件给整理一下. 一般用到比较多的就是初始化数据或者效果. 1.直接写在<body>标签 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- Javascript中常用事件集合和事件使用方法
Javascript中常用事件集合和事件使用方法 一.事件绑定 格式: 事件源 . on事件类型=事件处理函数 事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- javascript中onclick事件能调用多个方法吗
Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
随机推荐
- Elasticsearch教程（七） elasticsearch Insert 插入数据（Java）
首先我不赞成再采用一些中间件(jar包)来解决和 Elasticsearch 之间的交互,比如 Spring-data-elasticsearch.jar 系列一样,用就得依赖它.而 Elastic ...
- 在vs2010中编译log4cxx-0.10.0具体方法（从下载、编译、解决错误具体介绍）
一. 简单介绍 log4cxx是Java社区著名的log4j的c++移植版.用于为C++程序提供日志功能,以便开发人员对目标程序进行调试和审计,log4cxx是apache软件基金会的开源项目,基于A ...
- OpenCV入门笔记（三） 图片处理
OpenCV中提供了非常多处理图片的强大函数,能够对非常多格式的图片 加特效.有点实现Photoshop里的工具的感觉. 以下先介绍一些简单和常见的特效. 二值化(Image Threshold) 參 ...
- MySQL的四种变量类型
一.全局变量在系统运行期间动态更改其参数,重启后失效.SET GLOABL var=XXX;SET @@global.var=XXX;以上两种方式等效 查看系统的全局变量show global var ...
- python——iterator迭代器|iterator详解——20140918|
-----------------------------------------------------------------------------前言--------------------- ...
- react-native fetch 请求封装
1.fetch 函数封装 fetch.js /** * 请求头 * @type {{Accept: string, Content-Type: string}} */ const header = { ...
- B树、B-树、B+树、B*树(转）
B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...
- 【VBA】VBA编写的，将一列中相同的内容的行提取出来单独生成文件
数据如上图所示,点击RUN后的运行结果如下: 得到该文件夹,文件夹内容如上图. 代码如下: Private Sub Command_OLIVER() Dim arr arr = Range(" ...
- Eclipse中设置格式化jsp自动换行
JSP代码换行:Window->Preferences->Web->JSP Files->Editor->Line width
- 征信报告页面的input验证收集
https://ipcrs.pbccrc.org.cn/ function checkLoginName() { var loginName = $.trim($("#loginname&q ...