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


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 26 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
JavaScript 类的封装操作示例详解
May 16 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
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
php语法检查的方法总结
2019/01/21 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
本地存储localStorage用法详解
2017/07/31 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
Python如何测试stdout输出
2020/08/10 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
求职自荐信怎么写
2014/03/06 职场文书
租房合同协议书
2014/04/09 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js