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

最新推荐文章于 2021-05-26 13:05:21 发布

魔豆爸

最新推荐文章于 2021-05-26 13:05:21 发布

阅读量817

点赞数

分类专栏： core js 文章标签： prototype JavaScript Flash IE EXT ViewUI

core js 专栏收录该内容

140 篇文章 0 订阅

订阅专栏

如何给事件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代码。

魔豆爸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
给事件handler传参数-初学者的困惑

如何给事件handler传参数？在刚刚接触Javascript的时候，由于对闭包理解不深刻，常常纠结于该问题。在讨论群里也经常碰到这样的问题，如下：&lt;!DOCTYPE HTML&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charse...
复制链接

扫一扫