Javascript中onload加载多个函数实例
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 昨天有一个功能需要在一个页面多次使用onload的方法，但好像一个页面一般情况下只能使用一次onload加载一个函数呀，后来百度了发现onload加载多个函数方法很简单，下面我来给大家介...
|
如果直接对winow.onload进行赋值，会覆盖原来绑定的onload事件。如何能多次绑定了，有下面三种方法
1、将要绑定的事件写在一块，然后对onload进行赋值
| 代码如下 |
复制代码 |
|
window.onload=function(){function1();function2();}
|
2、通过自定义addLoadEvent来解决
| 代码如下 |
复制代码 |
|
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!=’function’){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
|
添加要加载执行的事件:
| 代码如下 |
复制代码 |
|
addLoadEvent(func1);
addLoadEvent(func2);
|
3、要想在你的程序中给一个事件指派多个处理过程的话，只要首先判断一下浏览器，然后根据不同的浏览器，选择使用 attachEvent 还是 addEventListener 就可以了。实例如下
| 代码如下 |
复制代码 |
|
if (document.all) {
window.attachEvent(‘onload’, func1);
window.attachEvent(‘onload’, func2);
} else {
window.addEventListener(‘load’, func1, false);
window.addEventListener(‘load’, func2, false);
}
|
除了上面方法还有没有其它办法呢
用法如下：
| 代码如下 |
复制代码 |
|
function func(){alert("this is window onload event!");return;}
window.onload=func;
或者如下：
window.onload=function(){alert("this is window onload event!");return;}
|
但window.onload 不能同时加载多个函数。
比如：
| 代码如下 |
复制代码 |
|
function t(){
alert("t")
}
function b(){
alert("b")
}
window.onload =t ;
window.onload =b ;
|
后面会把前面的覆盖，上面代码只会输出 b。
此时可用如下方法解决：
| 代码如下 |
复制代码 |
|
window.onload =function() { t(); b(); }
|
另一种解决办法
代码
| 代码如下 |
复制代码 |
|
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> function addLoadEvent(func) {
var oldonload = window.onload;//得到上一个onload事件的函数
if (typeof window.onload != 'function') {//判断类型是否为'function',注意typeof返回的是字符串
window.onload = func;
} else {
window.onload = function() {
oldonload();//调用之前覆盖的onload事件的函数---->由于我对js了解不多,这里我暂时理解为通过覆盖onload事件的函数来实现加载多个函数
func();//调用当前事件函数
}
}
}
//(完整示例)使用如下：
function t(){
alert("t")
}
function b(){
alert("b")
}
function c(){
alert("c")
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
//等价于 window.onload =function() { t(); b(); c() ;}
|
个人以为直接使用隐式函数(如：window.onload =function() { t(); b(); c() ;})更快捷，当然使用 addLoadEvent 更professional，各取所好吧！
执行多个window.onload产生too much recursion错误
，通用的解决方案如下：
| 代码如下 |
复制代码 |
<script type="text/javascript">
var func = window.onload;
window.onload = function(){
func ? func() : 0;
alert(1);
}
</script>
|
这样的原理就是把window.onload事件一级一级传递，保证每一个window.onload事件能执行，但如果出现多次调用而且变量名一样，就会产生too much recursion错误，如下
| 代码如下 |
复制代码 |
<script type="text/javascript">
var func = window.onload;
window.onload = function(){
func ? func() : 0;
alert(1);
}
func = window.onload;
window.onload = function(){
func ? func() : 0;
alert(2);
}
</script>
|
上面实现执行两个window.onload事件，但由于每次传递window.onload事件定义为相同的变量名，就会产生too much recursion错误。
解决方法
由于产生的原因是因为定义为相同的变量名产生循环执行代码，因此解决方法只需要把变量名定义不同即可解决。如下
| 代码如下 |
复制代码 |
<script type="text/javascript">
var func = window.onload;
window.onload = function(){
func ? func() : 0;
alert(1);
}
func1 = window.onload;
window.onload = function(){
func1 ? func1() : 0;
alert(2);
}
</script>
|
Web页面如果出现多次window.onload事件，尽量能合并操作处理，或实现类似于jQuery的ready事件机制，解决冗余代码问题，提高代码的可读性。
更多详细内容请查看：http://www.111cn.net/wy/js-ajax/too-much-recursion.htm |
