JavaScript为事件处理函数传递参数
JavaScript为事件处理函数传递参数属于前端实例代码，有关更多实例代码大家可以查看。
本章节就以click点击事件为例，介绍一下如何为事件处理函数传递参数。
ele.addEventListener('click', fun,false);
ele.attachevent('onclick',fun);
ele['onclick']=fun
上面的三种方式可以为元素注册click事件处理函数。
特别说明第一种是标准浏览器的方式，第二种是IE11以下浏览器采用的方式，第三种就不用多说了，能够兼容各个浏览器。
但是为事件处理函数传递参数绝对不能是下面的方式:
ele.addEventListener('click',fun(arg1,arg2,arg3),false);
ele.attachevent('onclick',fun(arg1,arg2,arg3));
ele['onclick']=fun(arg1,arg2,arg3);
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
function done(){
arguments[0].innerHTML=arguments[1];
}
function bindFunction(obj,func){
var args=[];
for(var index=2;index<arguments.length;index++) {
args.push(arguments[index]);
}
return function(){
func.apply(obj,args);
}
}
function addEvent(node,type,listener){
if (node.addEventListener) {
node.addEventListener(type,listener,false);
return true;
}
else if (node.attachEvent) {
node.attachEvent('on' + type,listener);
return true;
}
};
window.onload=function(){
var oshow=document.getElementById("show");
var obt=document.getElementById("bt");
addEvent(obt,"click",bindFunction(obt,done,oshow,"前端教程网"));
}
</script>
</head>
<body>
<div id="show"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
上面的代码实现了为事件处理函数传递参数的效果，下面介绍一下它的实现过程。
一.代码注释:
（1）.function done(){
arguments[0].innerHTML=arguments[1];
}
声明一个函数，当事件处理函数执行的时候，会调用此函数。
（2）.function bindFunction(obj,func){}，此函数可以返回一个匿名函数作为事件处理函数，并且此事件处理函数会为匿名函数传递一个数组参数，第一个参数是元素对象，第二个参数是事件处理函数执行时调用的函数。
（3）.var args=[]，声明一个数组用来存储传递的参数。
（4）.for(var index=2;index<arguments.length;index++) {
args.push(arguments[index]);
}从第三个参数开始进行遍历，因为从第三个参数开始，就相当于为事件处理函数传递的参数，并将相应的参数存入数组。
（5）.return function(){
func.apply(obj,args);
}
返回一个匿名函数，在这里func函数使用apply进行了一下处理，目的是为了能够接收一个数组。
（6）.function addEvent(node,type,listener){
if (node.addEventListener) {
node.addEventListener(type,listener,false);
return true;
}
else if (node.attachEvent) {
node.attachEvent('on' + type,listener);
return true;
}
};
为指定元素注册事件处理函数，上面是兼容性处理。
二.相关阅读:
（1）.apply()方法参阅javascript apply()一章节。
（2）.push()方法参阅javascript push()一章节。
（3）.addEventListener()方法参阅addEventListener()用法一章节。
JavaScript为事件处理函数传递参数，这样的场景在实际项目中还是用的比较多的，关于JavaScript为事件处理函数传递参数就介绍到这了。