把多个JavaScript函数绑定到onload事件处理函数上

为了让函数只在页面加载完毕后才得到执行，我们会把函数绑定到onload事件上：

window.onload = userFunction

但如果有两个函数：firstFunction() 和 secondFunction()，都想让它们在页面加载完毕后得到执行，该怎么办？如果这样：

window.onload = firstFunciton;

window.onload = secondFunction;

只有最后一个函数能被执行。由此可得：每个事件处理函数只能绑定一条指令。

但我们可以这样做：

window.onload = function(){

firstFunction();

secondFunction();

}

这是一个解决办法。

不过，还有一个更通的解决方案——额外编写一些代码，但好好处是，有了这些代码，把函数，不管它们有多少，绑定到window.onload事件上的工作就非常简明易行了。

这个函数的的名字是addLoadEvent，它是由Simon Willison编写的。它只有一个参数：打算在页面加载完毕时执行的函数的名字。

下面是addLoadEvent()函数将要完成的操作：

把现有的window.onload事件处理函数的值存入变量oldonload。
如果在这个处理函数上还没有绑定任何函数，就像平时那样把形函数添加给它。
如果在这个处理函数上已经绑定了一些函数，就把形函数追加到现有指令的末尾。

下面是addLoadEvent()函数的代码清单：

function addLoadEvent(func){

var oldonload = window.onload;

if(typeof window.onload != 'function'){

window.onload = func;

}else{

window.onload = function(){

oldonload();

func();

}

这相当于为那些将在页面加载完毕时执行的函数创建了一个队列。如果想把刚才那两个函数添加到队列中去，只需要写出以下代码即可：

addLoadEvent(firstFunction);

addLoadEvent(secondFunction);

把多个JavaScript函数绑定到onload事件处理函数上相关推荐

JavaScript中绑定事件监听函数的通用方法[ addEvent() ]
上篇文章讲到了事件绑定的3中常用方法:传统绑定.W3C绑定方法.IE绑定方法.但是,在实际开发中对于我们来讲重要的是需要一个通用的.跨浏览器的绑定方法.如果我们在互联网上搜索一下会发现许多方法,一下是 ...
JavaScript函数绑定
一个简单的函数绑定在JavaScript与DOM交互中经常需要使用函数绑定,定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上,绑定函数经常和回调函数及事件处理程序一起使用,以便把函 ...
如何把多个js函数绑定到事件上面
为什么需要绑定事件和多个事件在给网页加一些特效时,经常要加入"onload"事件,即在网页加载完后执行某事件,例如:<body onload="alert('欢迎 ...
js封装函数_JavaScript基础-如何封装函数来改变元素的位置
点击右上方红色按钮关注"小郑搞码事",每天都能学到知识,搞懂一个问题! 大家好!我是/小郑搞码事/的小郑今天给大家分享JavaScript的基础知识-改变元素的位置. 没错,用J ...
DOM-7 【兼容】事件处理函数、冒泡捕获、阻止冒泡默认事件
事件处理函数绑定事件 = 绑定事件的处理函数(事件本身是存在的,绑定的是相应的反馈) 事件 + 事件的反馈 = 前端交互 (前端核心) 绑定事件的方式 1. 句柄绑定默认(只能)是事件冒泡这种事件 ...
各浏览器对页面 onload 事件处理方式不一致
作者:钱宝坤标准参考关于 HTML 4.01 规范中 BODY 标记的 onload 属性说明: http://www.w3.org/TR/html401/struct/global.html#h ...
wxpython控件绑定事件_wxPython事件处理
与以顺序方式执行的控制台模式应用程序不同,基于GUI的应用程序是事件驱动的.函数或方法响应用户的操作来执行,例如单击按钮,从集合或鼠标单击等中选择一个项目,称为事件. 有关在应用程序运行时发生的事件的 ...
React 中高阶函数与高阶组件（上）
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
JavaScript移除绑定在元素上的匿名事件处理函数
前言: 面试的时候有点蒙,结束之后想想自己好像根本就误解了面试官的问题,因为我理解的这个问题本身就没有意义.但是当时已经有一些思路,但是在一个点上被卡住. 结束之后脑子瞬间灵光,想出了当时没有迈出的那 ...

把多个JavaScript函数绑定到onload事件处理函数上

把多个JavaScript函数绑定到onload事件处理函数上相关推荐

最新文章

热门文章