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


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 相关文章推荐
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
Express 配置HTML页面访问的实现
Nov 01 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
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP6新特性分析
2016/03/03 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
python获得一个月有多少天的方法
2015/06/04 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
python清理子进程机制剖析
2017/11/23 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Python网页解析器使用实例详解
2020/05/30 Python
python文件及目录操作代码汇总
2020/07/08 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
应届毕业生个人求职自荐信
2014/01/06 职场文书
刑事和解协议书范本
2014/11/19 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
2015中秋祝酒词
2015/08/12 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
golang使用map实现去除重复数组
2022/04/14 Golang