昨天晚上,我的朋友"加班苏"(因为老加班,呵呵)问我一个问题:他需要
在window.onload事件上绑定两个函数,但只能成功绑定一个。他的代码如下:
// 有两个函数 foo1() 和 foo2()
window.onload = foo1;
window.onload = foo2;
运行结果是,只有foo2()函数被执行了。但本意是要先执行完foo1(),再执行foo2()。
以下是我分析和解决的过程:
分析:他的代码之所以行不通,是因为第二次指定的函把第一次指定的函数替换
掉了,就相当于:
var xx; // 在JavaScript中,函数也是一个对象,也可以赋给一个变量
xx = foo1;
xx = foo2;
解决问题的思路:如果想在一个件上绑定两个函数,foo1()和foo2(),可以先声
明一个函数bar():
function bar(){
foo1();
foo2()
}
然后绑定bar()函数到事件上:
window.onload = bar;
扩展:这样的前提是事先知道有多少个函数要绑定,但如果不知道呢?那就可以
用下面这个方法:先写一个函数 binding(eventType, func) 用于绑定一个函数到
指定的事件上:
/**
* 绑定一个事件处理函数到指定的事件上。
*
* @param eventType 要绑定函数的事件,
* 如window.onload代表浏览器装载完文档后触发的事件
* @param func 要绑定的函数
*/
function binding(eventType, func)
{
if (!window.onload) {
// 如果还未绑定函数,就可以直接绑定
window.onload = func;
}
else
{ // 如果已经绑定了,就绑定一个匿名函数,作用是:
// 先调用原绑定的函数,再调用本次将要绑定的函数
var old = window.onload;
window.onload = function(){
old();
func();
}
}
}
然后,每次想往某个事件上绑定事件时,都调用这个函数来绑定就可以了:
binding(window.onload, foo1);
binding(window.onload, foo2);
呵呵,这是方法是看FCKeditor的源码时学到的。