给事件响应函数传参数的四种方式小结


Posted in Javascript onDecember 05, 2013

如何给事件handler传参数?在刚刚接触Javascript的时候,由于对闭包理解不深刻,常常纠结于该问题。

在讨论群里也经常碰到这样的问题,如下

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>如何给事件handler传参数?</title>
</head>
<body>
 <a href="#" id="aa">Click me</a>
 <script type="text/javascript">
  var E = {
   on : function(el, type, fn){
    el.addEventListener ?
     el.addEventListener(type, fn, false) :
     el.attachEvent("on" + type, fn);
   },
   un : function(el,type,fn){
    el.removeEventListener ?
     el.removeEventListener(type, fn, false) :
     el.detachEvent("on" + type, fn);  
   }
  };  var v1 = 'jack', v2 = 'lily';      
  function handler(arg1,arg2){
   alert(arg1);
   alert(arg2);
  }
  // 如何把参数v1,v2传给handler?
  // 默认事件对象将作为handler的第一个参数传入,
  // 这时点击链接第一个弹出的是事件对象,第二个是undefined。    
  E.on(document.getElementById('aa'),'click',handler);
 </script>
</body>
</html>

如何把参数v1,v2传给handler?默认事件对象将作为handler的第一个参数传入,这时点击链接第一个弹出的是事件对象,第二个是undefined。

方案一 ,未保留事件对象作为第一个参数传入

function handler(arg1,arg2){
 alert(arg1);
 alert(arg2);
}
E.on(document.getElementById('aa'),'click',function(){ 
 handler(arg1,arg2); 
});

方案二,保留事件对象作为第一个参数 
function handler(e,arg1,arg2){
 alert(e);
 alert(arg1);
 alert(arg2);
}
E.on(document.getElementById('aa'),'click',function(e){
 handler(e,arg1,arg2);
});

方案三,给Function.prototype添加getCallback,不保留事件对象
Function.prototype.getCallback = function(){
 var _this = this, args = arguments;  
 return function(e) {
        return _this.apply(this || window, args);
    };
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));

方案四,给Function.prototype添加getCallback,保留事件对象作为第一个参数传入
Function.prototype.getCallback = function(){
 var _this = this, args = [];
 for(var i=0,l=arguments.length;i<l;i++){
  args[i+1] = arguments[i];
 }
 return function(e) {
  args[0] = e;
        return _this.apply(this || window, args);
    };
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));
Javascript 相关文章推荐
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 #Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 #Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 #Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 #Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 #Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 #Javascript
JavaScript执行顺序详细介绍
Dec 04 #Javascript
You might like
模拟xcopy的函数
2006/10/09 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
解析js如何获取css样式
2016/12/11 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
Vue3为什么这么快
2020/09/23 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
在Python中使用异步Socket编程性能测试
2014/06/25 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
会计专业自荐信
2013/12/02 职场文书
学生偷窃检讨书
2014/09/25 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python