共享onload事件
-
我们在JavaScript中经常需要在网页文档加载完毕后立刻执行某函数 。网页加载完毕后会触发一个onload事件,这个时间与window对象相关联。
例如,我们现在有一个wasabi函数,我们需要在网页文档加载完毕后立刻执行wasabi函数,那么我们就这样写:
window.onload = wasabi;
但是假如我有两个函数怎么办呢?比如我现在有一个wasabi1函数和一个wasabi2函数,怎样让它们都在页面加载时得到执行?我们可能会想到将它们逐一绑定在onload事件上:
window.onload = wasabi1; window.onload = wasabi2;
但其实,这样的做法是错误的! 它们中只有最后一个函数(即wasabi2)才会被得到实际执行。因为wasabi2将取代wasabi1
在需要绑定的函数不是很多的场合,我们可以这样写:
window.onload = function() { wasabi1(); wasabi2(); }
但是在需要绑定的函数非常多的时候,这时就不适用了。Simon Willison大神早就给出了一个解决方案:编写一个addLoadEvent函数:
function addLoadEvent(func) { var oldonload = window.onload;//将现有的window.onload事件存入oldonload变量 if(typeof window.onload != 'function')//如果这个事件处理函数上还没有绑定任何函数 window.onload = func;//那么就给它添加这个函数 else//如果事件处理函数上已经有了其他的函数 { window.onload = function() { oldonload();//执行旧的函数 func();//并将新函数追加到现有指令的末尾 } } }
这样我们以后在需要网页加载完毕后执行多个函数时,就只用这样写:
addLoadEvent(wasabi1); addLoadEvent(wasabi2);