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


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 相关文章推荐
javascript 密码强弱度检测万能插件
Feb 25 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
弹出最简单的模式化遮罩层的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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
用js编写留言板
2020/03/17 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Python进度条的制作代码实例
2019/08/31 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
大学应届生求职简历的自我评价
2013/10/08 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
夜不归宿检讨书
2014/02/25 职场文书
小班开学寄语
2014/04/04 职场文书
办公室主任个人总结
2015/02/28 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js