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为事件处理函数传递参数就介绍到这了。

回复

我来回复
  • 暂无回复内容