注册带参数的事件处理函数

在非简单事件模型中，给一个HTML注册事件处理函数时采用如下的方式：element.on

clik=funtionName;

这里element为要进行事件注册的HTML元素，onclik为注册的事件类型，funtionName为处理函数的名字(即函数引用)。例如：

 

<script>

    function myFunction(){alert("调用了事件处理函数");}

    document.getElementById("myButton").onclik=myFunction;      

    //为id为myButton的元素注册onclik事件的处理函数为myFunction

</script>

 

注意到等号右边只是一个函数引用，不能带括号，因而也不能带参数 ，例如写成下列的写法是错误的：

 

<script>

    function myFunction(){alert("调用了事件处理函数");}

    document.getElementById("myButton").onclik=myFunction();                      //不能带括号

    document.getElementById("myButton").onclik=myFunction("hello!");            //不能带括号因而不能带参数

</script>

 

上述代码在运行时，IE中会报错：未实现错误；在Firefox中则不报错正常运行 ，但是得不到运行结果

但是很多时候我们需要在事件被触发时给处理函数传递参数，那么应该怎么实现？有以下几种方法：

(一)、将注册改为采用简单事件模型，这种模型下给HTML元素注册事件处理函数是在HTML标记中完成，这时可以给处理函数传递参数。例如：

 

<button onclick="myFunction('hello!')"></button>

<script>

    function myFunction(msg){alert(msg);}

</script>

 

(二)、仍旧使用非简单事件模型，加上匿名函数的使用，即将带参数的、包含实际的处理逻辑的函数封装到一个不带参数的外层函数中，然后将此外层函数注册为事件处理函数。这种方法用的较多。例如：

 

<script>

    function myFunction(msg){alert(msg);}

    document.getElementById("myButton").onclik=function() {myFunction("hello!");}                           

    //为id为myButton的元素注册onclik事件的处理函数,使用匿名函数封装实际的处理函数

</script>

 

  (三)、使用Function动态创建函数,在创建函数时传入参数

 

<script>

    function myFunction(msg){alert(msg);}

    var  proper="hello";                                            //参数

    document.getElementById("myButton").onclik=new Function("myFunction("+proper+")");

   //为id为myButton的元素注册onclik事件的处理函数，是一个函数体为"myFunction("+proper+")"的匿名函数

</script>

 

 这里解释一下动态创建函数(即实例化一个函数对象)的写法：var funcName=new Function(p1,p2,...,pn,body); new Function的参数类型都是字符串，p1到pn表示所创建函数的参数名称列表，body表示所创建函数的函数体语句，funcName就是所创建函数 的名称。p1到pn可以省略，表示创建一个没有参数的函数，如上面就创建了一个没有参数只有函数体的函数。