JavaScript事件处理程序传递参数

        给事件处理程序传递参数不仅是自定义事件中存在的问题，也是系统内部对象的事件机制中存在的问题，因为事件机制仅传递一个函数的名称，不带有任何参数的信息，所以无法传递参数进去。例如：

//定义类class1
function class1(){
//构造函数
}
class1.prototype={
show:function(){
//show函数的实现
this.onShow(); //触发onShow事件
},
onShow:function(){} //定义事件接口
}
//创建class1的实例
var obj=new class1();
//创建obj的onShow事件处理程序
function objOnShow(userName){
alert(“hello,”+userName);
}
//定义变量userName
var userName=”jack”;
//绑定obj的onShow事件
obj.onShow=objOnShow; //无法将userName这个变量传递进去
//调用obj的show方法
obj.show();

注意上面的obj.onShow=objOnShow 事件绑定语句，不能够为了传递userName 进去而写成：
obj.onShow=objOnShow(userName);
或者：
obj.onShow=”objOnShow(userName)”;

前者是将objOnShow(userName)的运行结果赋给了obj.onShow，而后者是将字符串
“objOnShow(userName)”赋给了obj.onShow。

要解决这个问题，可以从相反的思路去考虑，不考虑怎么把参数传进去，而是考虑如何构建一个无需参数的事件处理程序，该程序是根据有参数的事件处理程序创建的，是一个外层的封装。现在自定义一个通用的函数来实现这种功能：

//将有参数的函数封装为无参数的函数
function createFunction(obj,strFunc){  //其中obj接收函数归属的对象，strFunc接收要处理事件的函数
var args=[]; //定义args用于存储传递给事件处理程序的参数
if(!obj)obj=window; //如果是全局函数则obj=window;
//得到传递给事件处理程序的参数
for(var i=2;i<arguments.length;i++)args.push(arguments[i]);
//用无参数函数封装事件处理程序的调用
return function(){
obj[strFunc].apply(obj,args); //这句代码是关键。将参数传递给指定的事件处理程序
}
}

该方法将一个有参数的函数封装为一个无参数的函数，不仅对全局函数适用，对作为对象方法存在的函数同样适用。该方法首先接收两个参数：obj 和strFunc，obj 表示事件处理程序所在的对象；strFunc 表示事件处理程序的名称。除此以外，程序中还利用arguments对象处理第二个参数以后的隐式参数（即未定义形参的参数），并在调用事件处理程序时将这些参数传递进去。例如一个事件处理程序是：

someObject.eventHandler=function(_arg1,_arg2){
//事件处理代码
}

应该调用：

createFunction(someObject,”eventHandler”,arg1,arg2);

这就返回一个无参数的函数，在返回的函数中已经包括了传递进去的参数。如果是全局函数作为事件处理程序，事实上它是window 对象的一个方法，所以可以传递window 对象作为obj参数，要是为了更清晰一点，也可以指定obj 为null，createFunction函数内部会自动认为该函数是全局函数，从而自动把obj赋值为window。下面来看应用的例子：

<script language="JavaScript" type="text/javascript">
<!--
//将有参数的函数封装为无参数的函数
function createFunction(obj,strFunc){
var args=[];
if(!obj)obj=window;
for(var i=2;i<arguments.length;i++)args.push(arguments[i]);
return function(){
obj[strFunc].apply(obj,args);
}
}
//定义类class1
function class1(){
//构造函数
}
class1.prototype={
show:function(){
//show函数的实现
this.onShow(); //触发onShow事件
},

onShow:function(){} //定义事件接口
}
//创建class1的实例
var obj=new class1();
//创建obj的onShow事件处理程序
function objOnShow(userName){
alert(“hello,”+userName);
}
//定义变量userName
var userName=”jack”;
//绑定obj的onShow事件
obj.onShow=createFunction(null,”objOnShow”,userName);
//调用obj的show方法
obj.show();
//-->
</script>

在这段代码中，就将变量userName作为参数传递给了objOnShow事件处理程序。事实上，obj.onShow得到的事件处理程序并不是objOnShow，而是由createFunction返回的一个无参函数。通过createFunction 这的封装，就可以用一种通用的方案实现参数传递了。这不仅适用于自定义的事件，也适用于系统提供的事件，其原理是完全相同的。