web-dev-qa-db-ja.com

addEventListenerを使用して関数にパラメーターを渡す方法は？

イベントリスナーを追加する従来の方法：

function getComboA(sel) {
    var value = sel.options[sel.selectedIndex].value;  
}

<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>

しかし、私はaddEventListenerの方法に適応したかったのです。

productLineSelect.addEventListener('change',getSelection(this),false);

function getSelection(sel){
    var value = sel.options[sel.selectedIndex].value;
    alert(value);
}

GetSelection（）のパラメーターをaddEventListenerメソッドの2番目のパラメーターとして渡すことができないため、機能しませんか？私の知る限り、括弧なしでのみ関数名を使用できます。

何か案が？

ところで、 前の質問 をご覧ください。console.logについては、safari 6.0開発者インスペクターでは機能しません。コンソールに出力を書き込めません。

javascripthtmljavascript-events
48
mko

何も渡す必要はありません。addEventListenerに使用される関数は、自動的にthisを現在の要素にバインドします。関数でthisを使用するだけです：

productLineSelect.addEventListener('change', getSelection, false);

function getSelection() {
    var value = this.options[this.selectedIndex].value;
    alert(value);
}

フィドルは次のとおりです。 http://jsfiddle.net/dJ4Wm/

関数に任意のデータを渡したい場合は、それを独自の匿名関数呼び出しでラップします。

productLineSelect.addEventListener('change', function() {
    foo('bar');
}, false);

function foo(message) {
    alert(message);
}

フィドルは次のとおりです。 http://jsfiddle.net/t4Gun/

thisの値を手動で設定する場合は、 callメソッド を使用して関数を呼び出すことができます。

var self = this;
productLineSelect.addEventListener('change', function() {
    getSelection.call(self);
    // This'll set the `this` value inside of `getSelection` to `self`
}, false);

function getSelection() {
    var value = this.options[this.selectedIndex].value;
    alert(value);
}
102
Joseph Silber

JSコードの1行目：

select.addEventListener('change', getSelection(this), false);

getSelection を呼び出している場合、(this)を関数参照の後ろに配置します。これは、実際の関数自体への参照ではなく、addEventListenerにその呼び出しの戻り値を渡すようになっているためです。

addEventListenerによって呼び出される関数では、thisの値は、リスナーが接続されているオブジェクト（この場合はproductLineSelect）に自動的に設定されます。

それが必要な場合は、関数参照を渡すだけで、この例ではthisがaddEventListenerからの呼び出しでselectになります。

select.addEventListener('change', getSelection, false);

それがではないあなたが望むものであるなら、あなたは最善です bind あなたがaddEventListenerに渡す関数へのこの値

var thisArg = { custom: 'object' };
select.addEventListener('change', getSelection.bind(thisArg), false);

.bind部分も呼び出しですが、この呼び出しはbindを呼び出しているのと同じ関数を返し、その関数スコープ内のthisの値を返します fixed をthisArgに変更し、このバインディングの動的な性質を効果的にオーバーライドします。

実際の質問に到達するには："addEventListenerで関数にパラメーターを渡す方法"

追加の関数定義を使用する必要があります。

var globalVar = 'global';

productLineSelect.addEventListener('change', function(event) {
    var localVar = 'local';
    getSelection(event, this, globalVar, localVar);
}, false);

次に、イベントオブジェクト、addEventListenerのコールバック内のthisの値への参照、そのコールバック内で定義および初期化された変数、および独自のgetSelectionへのaddEventListener呼び出し全体の外部からの変数を渡します。関数。

また、外側のコールバック内でthisになるように選択したオブジェクトを再度持つこともできます。

var thisArg = { custom: 'object' };
var globalVar = 'global';

productLineSelect.addEventListener('change', function(event) {
    var localVar = 'local';
    getSelection(event, this, globalVar, localVar);
}.bind(thisArg), false);
6
Jeffrey Westerkamp

addEventListenerを使用すると、thisが自動的にバインドされます。したがって、イベントハンドラーがインストールされている要素への参照が必要な場合は、関数内からthisを使用します。

productLineSelect.addEventListener('change',getSelection,false);

function getSelection(){
    var value = sel.options[this.selectedIndex].value;
    alert(value);
}

addEventListenerを呼び出すコンテキストから他の引数を渡したい場合は、次のようなクロージャーを使用できます。

productLineSelect.addEventListener('change', function(){ 
    // pass in `this` (the element), and someOtherVar
    getSelection(this, someOtherVar); 
},false);

function getSelection(sel, someOtherVar){
    var value = sel.options[sel.selectedIndex].value;
    alert(value);
    alert(someOtherVar);
}
5
Lee

必要なthis値が、イベントハンドラをバインドしたオブジェクトだけである場合、addEventListener()は既にそれを行います。これを行うとき：

productLineSelect.addEventListener('change', getSelection, false);

getSelection関数は、イベントハンドラーがバインドされたオブジェクトにthisを設定して既に呼び出されます。また、イベントに関するあらゆる種類のオブジェクト情報を持つイベントオブジェクトを表す引数も渡されます。

function getSelection(event) {
    // this will be set to the object that the event handler was bound to
    // event is all the detailed information about the event
}

目的のthis値が、イベントハンドラーをバインドしたオブジェクト以外の値である場合、これを行うことができます。

var self = this;
productLineSelect.addEventListener('change',function() {
    getSelection(self)
},false);

説明として：

  1. thisの値を他のイベントハンドラーのローカル変数に保存します。
  2. 次に、addEventListenerを渡す匿名関数を作成します。
  3. その匿名関数では、実際の関数を呼び出して、保存されたthisの値を渡します。
2
jfriend00