把多个JavaScript函数绑定到onload事件处理函数上的方法
2019/6/27 22:10:13
本文主要是介绍把多个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()函数将要完成的操作:
1. 把现有的window.onload事件处理函数的值存入变量oldonload。
2. 如果在这个处理函数上还没有绑定任何函数,就像平时那样把形函数添加给它。
3. 如果在这个处理函数上已经绑定了一些函数,就把形函数追加到现有指令的末尾。
下面是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函数绑定到onload事件处理函数上的方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist