|
锁定老帖子 主题：给事件handler传参数-初学者的困惑
该帖已经被评为新手帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-09-27
最后修改：2010-10-01
如何给事件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代码。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-09-28
后面两种方式污染了原生JS，不推荐这么做。
|
| 返回顶楼 | |
|
发表时间：2010-09-28
pfans 写道 后面两种方式污染了原生JS，不推荐这么做。
个人觉得也不算污染，Function.prototype适当扩展基本不影响什么，Object.prototype才叫要命。 Ext里就是这样做的，JS的这个特性还是很有用的，只是不能滥用罢了。 |
| 返回顶楼 | |
|
发表时间：2010-09-29
function handler(e,arg1,arg2){
alert(e);
alert(arg1);
alert(arg2);
}
E.on(document.getElementById('aa'),'click',function(e){
handler(e,v1,v2);
});
为什么要用闭包呢？不用闭包也行的啊 |
| 返回顶楼 | |
|
发表时间：2010-09-30
最后修改：2010-09-30
to libmw : 谢谢提醒，我搞复杂了。已修改。
|
| 返回顶楼 | |
|
发表时间：2010-09-30
zhouyrt 写道 to libmw : 谢谢提醒，我搞复杂了。
 哎，可惜啊，我想搞复杂但是搞不出来……
|
| 返回顶楼 | |
|
发表时间：2010-09-30
libmw 写道
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 |
| 返回顶楼 | |
|
发表时间：2010-09-30
libmw 写道 zhouyrt 写道 to libmw : 谢谢提醒，我搞复杂了。
哎，可惜啊，我想搞复杂但是搞不出来……IT业界更崇尚简单就是美 
|
| 返回顶楼 | |
|
发表时间：2010-10-01
KimHo 写道 libmw 写道 zhouyrt 写道 to libmw : 谢谢提醒，我搞复杂了。
哎，可惜啊，我想搞复杂但是搞不出来……IT业界更崇尚简单就是美 说的很对，简单就是美。 |
| 返回顶楼 | |
|
发表时间：2010-10-02
clue 写道 libmw 写道
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次闭包的事。。。 |
| 返回顶楼 | |
