给事件响应函数传参数的多种方式
转：Snandy
给事件响应函数传参数的多种方式
如何给事件handler传参数？在刚刚接触Javascript的时候，由于对闭包理解不深刻，常常纠结于该问题。
在讨论群里也经常碰到这样的问题，如下
- 01 <!DOCTYPE HTML>
- 02 <html>
- 03 <head>
- 04 <meta charset="utf-8">
- 05 <title>如何给事件handler传参数？</title>
- 06 </head>
- 07 <body>
- 08 <a href="#" id="aa">Click me</a>
- 09 <script type="text/javascript">
- 10 var E = {
- 11 on : function(el, type, fn){
- 12 el.addEventListener ?
- 13 el.addEventListener(type, fn, false) :
- 14 el.attachEvent("on" + type, fn);
- 15 },
- 16 un : function(el,type,fn){
- 17 el.removeEventListener ?
- 18 el.removeEventListener(type, fn, false) :
- 19 el.detachEvent("on" + type, fn);
- 20 }
- 21 };
- 22
- 23 var v1 = 'jack', v2 = 'lily';
- 24 function handler(arg1,arg2){
- 25 alert(arg1);
- 26 alert(arg2);
- 27 }
- 28
- 29 // 如何把参数v1，v2传给handler？
- 30 // 默认事件对象将作为handler的第一个参数传入，
- 31 // 这时点击链接第一个弹出的是事件对象，第二个是undefined。
- 32 E.on(document.getElementById('aa'),'click',handler);
- 33 </script>
- 34 </body>
- 35 </html>
复制代码如何把参数v1，v2传给handler？默认事件对象将作为handler的第一个参数传入，这时点击链接第一个弹出的是事件对象，第二个是undefined。
方案一 ，未保留事件对象作为第一个参数传入
- 1 function handler(arg1,arg2){
- 2 alert(arg1);
- 3 alert(arg2);
- 4 }
- 5 E.on(document.getElementById('aa'),'click',function(){
- 6 handler(arg1,arg2);
- 7 });
复制代码方案二，保留事件对象作为第一个参数
- 1 function handler(e,arg1,arg2){
- 2 alert(e);
- 3 alert(arg1);
- 4 alert(arg2);
- 5 }
- 6 E.on(document.getElementById('aa'),'click',function(e){
- 7 handler(e,arg1,arg2);
- 8 });
复制代码方案三，给Function.prototype添加getCallback，不保留事件对象
- 1 Function.prototype.getCallback = function(){
- 2 var _this = this, args = arguments;
- 3 return function(e) {
- 4 return _this.apply(this || window, args);
- 5 };
- 6 }
- 7 E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));
- 方案四，给Function.prototype添加getCallback，保留事件对象作为第一个参数传入
- view sourceprint?
- 01 Function.prototype.getCallback = function(){
- 02 var _this = this, args = [];
- 03 for(var i=0,l=arguments.length;i<l;i++){
- 04 args[i+1] = arguments[i];
- 05 }
- 06 return function(e) {
- 07 args[0] = e;
- 08 return _this.apply(this || window, args);
- 09 };
- 10 }
- 11 E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));
复制代码
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论