Javascript中onload加载多个函数实例
如果直接对winow.onload进行赋值,会覆盖原来绑定的onload事件。如何能多次绑定了,有下面三种方法
1、将要绑定的事件写在一块,然后对onload进行赋值
代码如下 | |
window.onload=function(){function1();function2();} |
2、通过自定义addLoadEvent来解决
代码如下 | |
function addLoadEvent(func){ |
添加要加载执行的事件:
代码如下 | |
addLoadEvent(func1); |
3、要想在你的程序中给一个事件指派多个处理过程的话,只要首先判断一下浏览器,然后根据不同的浏览器,选择使用 attachEvent 还是 addEventListener 就可以了。实例如下
代码如下 | |
if (document.all) { |
除了上面方法还有没有其它办法呢
用法如下:
代码如下 | |
function func(){alert("this is window onload event!");return;}
或者如下:
|
但window.onload 不能同时加载多个函数。
比如:
代码如下 | |
function t(){ |
后面会把前面的覆盖,上面代码只会输出 b。
此时可用如下方法解决:
代码如下 | |
window.onload =function() { t(); b(); } |
另一种解决办法
代码
代码如下 | |
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> function addLoadEvent(func) { //(完整示例)使用如下: function t(){ addLoadEvent(t); |
个人以为直接使用隐式函数(如: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