把多个JavaScript函数绑定到onload事件处理函数上的技巧
一,onload事件发生条件
用户进入页面且页面所有元素都加载完毕。如果在页面的初始位置添加一个JavaScript函数,由于文档没有加载完毕,DOM不完整,可能导致函数执行错误或者达不到我们想要的效果。
二,绑定多个函数到onload事件上
1,先展示一个错误的做法
window.onload = firstFunction;
window.onload = secondFunction;
实际执行过程中,只有最后一个函数被执行,因为每个事件处理函数只能绑定一条指令。
2,使用一个匿名函数
window.onload = function()
{
firstFunction();
secondFunction();
}
3,一个通用的解决方案
函数名称为addLoadEvent,它由Simon Willision编写,参数为页面执行完毕时需要执行的函数名字。
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
如果window.onload没有进行任何赋值操作,window.onload返回的是一个object,进行赋值之后,返回function。
这个函数的优点在于无论有多少个需要执行的函数,我只需加上一条语句就可以搞定,而无须修改以前的代码。
addLoadFunction(firstFunction);
addLoadFunction(secondFunction);
把多个JavaScript函数绑定到onload事件处理函数上的技巧的更多相关文章
- 把多个JavaScript函数绑定到onload事件处理函数上
为了让函数只在页面加载完毕后才得到执行,我们会把函数绑定到onload事件上: window.onload = userFunction 但如果有两个函数:firstFunction() 和 seco ...
- 把多个js函数绑定到onload时间处理函数上
js的window.onload=function();网页加载完毕时会触发一个onload事件,这个事件与window对象相关联,是让一个函数在网页加载完毕之后得到执行.但是如果有两个韩式first ...
- JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...
- JavaScript:理解事件、事件处理函数、钩子函数、回调函数
详情请点击 http://www.jianshu.com/p/a0c580ed3432
- JavaScript函数绑定
一个简单的函数绑定 在JavaScript与DOM交互中经常需要使用函数绑定,定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上,绑定函数经常和回调函数及事件处理程序一起使用,以便把函 ...
- 第一百二十一节,JavaScript事件绑定及深入
JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
- JavaScript实现绑定DOM的定时器插件
问题 使用原生的setTimeout和setInterval仅仅能够实现, 定时执行事件处理函数, 在网页开发中, 往往会出现一种情况,定时器用于定时更新某个页面区域的数据, 往往在页面加载之后, 就 ...
- js 高程 22.1.4 函数绑定 bind() 封装分析
js 高程 书中原话(斜体表示): 22.1.4 函数绑定 另一个日益流行的高级技巧叫做函数绑定.函数绑定要创建一个函数,可以在特定的this 环境中 以指定参数调用另一个函数.该技巧常常和回调函数与 ...
- one(type,[data],fn) 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
one(type,[data],fn) 概述 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数. 在每个对象上,这个事件处理函数只会被执行一次.其他规则与bind()函数相同.这 ...
随机推荐
- 【excel】 超链接相关
如何导出超链接: 用visual basic处理 在excel中:Alt+F11 --> F7 --> 粘贴下面代码 -->F5(运行), 则会在原列接右侧出现超链 Sub Ext ...
- python 装饰器 第四步:基本装饰器的实现
#第四步:基本装饰器的实现 #用于扩展基本函数的函数 def kuozhan(func): #内部函数(扩展之后的eat函数) def neweat(): #以下三步就是扩展之后的功能,于是我们把这三 ...
- QTP使用dictionary 对象
1. 创建即使用Dictionary对象 ' 创建Dictionary对象Set Dic = CreateObject("Scripting.Dictionary")' 添加Dic ...
- jmeter 线程组之间传递动态变化的变量值
http://www.51testing.com/html/01/n-3725501.html https://www.jianshu.com/p/73832bae65af https://blog. ...
- 如何访问 Redis 中的海量数据,服务才不会挂掉?
来源:www.toutiao.com/i6697540366528152077 一.前言 有时候我们需要知道线上的Redis的使用情况,尤其需要知道一些前缀的key值,让我们怎么去查看呢?并且通常情况 ...
- 【知识强化】第四章 网络层 4.5 IPv6
这节课我们来学习一下IPv6. 首先呢我们来看一下为什么会有IPv6的产生.由于我们之前探讨过,对于IPv4这种编址方式呢,这个地址线已经被消耗殆尽了,已经没有剩多少地址.所以我们就学习了两种技术,一 ...
- 使用ubuntu的一些操作笔记20191203
前言 环境: virtualbox + Ubuntu 16.04 情况: 可以进入虚拟机中Ubuntu系统的桌面,但是外部可以访问到 ssh,输入正确的用户名和密码无法登录 无法正常启动 Apache ...
- java的BigDecimal比较大小
java的BigDecimal比较大小 //前提为a.b均不能为null if(a.compareTo(b) == -1){ System.out.println("a小于b"); ...
- redis单节点安装及cluster的安装
单点安装 wget http://download.redis.io/releases/redis-4.0.2.tar.gz tar zxvf redis-4.0.1.tar.gz -C /usr/l ...
- 部署.net Core 到 Windows server 2008 r2 IIs
1. 将项目发布 2.iis 新建网站,设置 3 安装windows server hosting 4 关于报错 1.下载sdk https://www.microsoft.com/net/lea ...