66

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

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()メソッドの2番目のパラメーターとしてパラメーターを渡すことができないため、機能しませんaddEventListenerか？私の知る限り、関数名は括弧なしでしか使用できません。

何か案が？

ところで、 Safari 6.0 Developer Inspectorで機能しないという以前の質問を見てくださいconsole.log。コンソールに出力を書き込めないので、イライラします。

4

4 に答える 4

134

何も渡す必要はありません。に使用される関数は、現在の要素に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);
}
于 2012-08-19T05:45:16.970 に答える
13

JSコードの最初の行：

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

関数参照の後ろに配置してgetSelectionを呼び出しています。(this)実際の関数自体への参照ではなく、その呼び出しの戻り値をaddEventListenerに渡しているため、これはおそらくあなたが望むものではありません。

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

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

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

それがあなたが望むものでないbind場合、あなたはあなたが渡している関数にこれのためのあなたの価値を最もよくするでしょうaddEventListener：

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

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

実際の質問に答えるには、「addEventListenerで関数にパラメーターを渡す方法は？」

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

var globalVar = 'global';

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

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

thisまた、外部コールバック内に選択したオブジェクトがある場合もあります。

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

productLineSelect.addEventListener('change', function(event) {
    var localVar = 'local';
    getSelection(event, this, globalVar, localVar);
}.bind(thisArg), false);
于 2017-01-12T22:29:39.060 に答える
7

を使用する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);
}
于 2012-08-19T06:04:32.977 に答える
3

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。
于 2012-08-19T06:01:25.777 に答える