イベントハンドラーにパラメータを渡すにはどうすればよいですか?初めて Javascript に触れたとき、クロージャについて深く理解していなかったので、この問題によく苦労しました。
私はディスカッション グループで次のようなこの種の問題によく遭遇します。
次のようにコードをコピーします。
<!DOCTYPE HTML>
<html>
<頭>
<meta charset="utf-8">
<title>イベント ハンドラーにパラメーターを渡すにはどうすればよいですか? </タイトル>
</head>
<本文>
<a href="#" id="aa">クリックしてください</a>
<script type="text/javascript">
var E = {
上: 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 = 'ジャック'、v2 = 'リリー';
関数ハンドラー(arg1,arg2){
アラート(引数1);
アラート(引数2);
}
// パラメータ v1 と v2 をハンドラに渡すにはどうすればよいですか?
// デフォルトのイベント オブジェクトはハンドラーの最初のパラメーターとして渡されます。
//現時点では、リンクをクリックすると最初に表示されるのはイベント オブジェクトで、2 番目のオブジェクトは未定義です。
E.on(document.getElementById('aa'),'click',handler);
</script>
</body>
</html>
パラメーター v1 と v2 をハンドラーに渡すにはどうすればよいですか?デフォルトのイベント オブジェクトは、ハンドラーの最初のパラメーターとして渡されます。リンクをクリックすると、最初にポップアップ表示されるのはイベント オブジェクトで、2 番目のオブジェクトは未定義です。
オプション 1、イベント オブジェクトは保持されず、最初のパラメーターとして渡されます。
次のようにコードをコピーします。
関数ハンドラー(arg1,arg2){
アラート(引数1);
アラート(引数2);
}
E.on(document.getElementById('aa'),'click',function(){
ハンドラー(arg1,arg2);
});
オプション 2、イベント オブジェクトを最初のパラメータとして保持する
次のようにコードをコピーします。
関数ハンドラー(e,arg1,arg2){
アラート(e);
アラート(引数1);
アラート(引数2);
}
E.on(document.getElementById('aa'),'click',function(e){
ハンドラー(e,arg1,arg2);
});
オプション 3: イベント オブジェクトを保持せずに getCallback を Function.prototype に追加する
次のようにコードをコピーします。
Function.prototype.getCallback = function(){
var _this = これ、args = 引数;
戻り関数(e) {
return _this.apply(この || ウィンドウ, args);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));
オプション 4: getCallback を Function.prototype に追加し、イベント オブジェクトを最初のパラメーターとして保持します。
次のようにコードをコピーします。
Function.prototype.getCallback = function(){
var _this = これ、args = [];
for(var i=0,l=arguments.length;i<l;i++){
args[i+1] = 引数[i];
}
戻り関数(e) {
引数[0] = e;
return _this.apply(この || ウィンドウ, args);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));