给事件handler传参数-菜鸟的困惑

2012-10-28

给事件handler传参数-初学者的困惑如何给事件handler传参数？在刚刚接触Javascript的时候，由于对闭包理解不

给事件handler传参数-初学者的困惑

如何给事件handler传参数？在刚刚接触Javascript的时候，由于对闭包理解不深刻，常常纠结于该问题。在讨论群里也经常碰到这样的问题，如下：

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />        <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>

解决方案一

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 handler(arg1,arg2){alert(arg1);alert(arg2);}E.on(document.getElementById('aa'),'click',(function(arg1,arg2){return function(){handler.call(this,arg1,arg2);};})(v1,v2));

解决方案四，保留事件对象作为第一个参数

function handler(e,arg1,arg2){alert(e);alert(arg1);alert(arg2);}E.on(document.getElementById('aa'),'click',(function(arg1,arg2){return function(e){handler.call(this,e,arg1,arg2);};})(v1,v2));

解决方案三，给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));

最后附件中有四种解决方案完整的html，js代码。

哎，可惜啊，我想搞复杂但是搞不出来……
IT业界更崇尚简单就是美

说的很对，简单就是美。function handler(e,arg1,arg2){ alert(e); alert(arg1); alert(arg2);}E.on(document.getElementById('aa'),'click',function(e){ handler(e,v1,v2);});
为什么要用闭包呢？不用闭包也行的啊
其实，这也算是闭包，闭包无处不在
JS函数定义时会保存当前的执行环境，不管在何处执行，都能访问到当时的环境。
（所以在函数执行时，能访问到v1、v2）

参考scope chain

呵呵，已经是闭包了，不用再闭包一次了，以前也做过这种2次闭包的事。。。var E = { _fns:{}, _wrapped: function(type, fn, context){//一个便于传递更多函数上下文参数的包装函数 var me = this; var wfn = function(e){ fn.apply(me || window, [e, context]); } this._fns[type] = [fn, wfn];//把fn和wfn都缓存起来，在Unload时强制释放以免IE内存泄露 return wfn; }, on : function(el, type, fn, context){ el.addEventListener ? el.addEventListener(type, this._wrapped(type, fn, context), false) : el.attachEvent("on" + type, this._wrapped(type, fn, context)); }}; var v1 = 'jack', v2 = 'lily'; //如此传递上下文参数岂不更加自然，又避免给Function加一个用途很窄且不必要的原型函数 E.on(document.getElementById('aa'), 'click', function(e, arg){ alert(e) alert(arg); }, [v1,v2]);

热点排行

Web前端

给事件handler传参数-菜鸟的困惑