JavaScriptでイベントハンドラーの早期バインディングを行うにはどうすればよいですか？ （jqueryの例）

Question

JavaScriptの遅いバインディングは素晴らしいです。しかし、私がしたいときにどうすれば早めに縛ることができますか？

私はjQueryを使用して、divにループ内のイベントハンドラーとのリンクを追加しています。ループの変数「atag」が変化します。後でリンクをクリックすると、すべてのリンクが同じメッセージにアラートします。これは「atag」の最後の値です。すべてのリンクに別のアラートメッセージをバインドするにはどうすればよいですか？

すべてのリンクは、イベントハンドラーが追加されたときに「ATAG」が持っていた値に警告する必要があります。

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    nextTag.click(function() { alert(aTag); });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

Answer 1

データをに渡すことができます bind 方法：

nextTag.bind('click', {aTag: aTag}, function(event) {
    alert(event.data.aTag);
});

これにより、のコピーが作成されます aTag, 、したがって、各イベントハンドラーには異なる値があります。あなたのユースケースはまさにこのパラメーターが bind 存在します。

完全なコード：

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    nextTag.bind('click', {aTag: aTag}, function(event) {
      alert(event.data.aTag);
    });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

Answer 2

テキストをパラメーターとしてアラートし、イベントハンドラーを返すラッパー関数を作成することもできます

function makeAlertHandler(txt) {
  return function() { alert(txt); }
}

交換します

nextTag.click(function() { alert(aTag); });   

と

nextTag.click(makeAlertHandler(aTag));

Answer 3

このように、この変数のコピーを保持する必要があります。

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    var laTag = aTag;
    nextTag.click(function() { alert(laTag); });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

aTag ループの最後のアイテムとして残されているループの最後に、ループがループするたびに変数が変更されています。ただし、作成した各関数はこれを指します 同じ 変数。代わりに、変数あたりが必要なので、上記のようにローカルコピーを作成します。

また、チェーンでこれを大幅に短縮することもできますが、問題はスコーピングと参照であるため、この場合はポイントを曇らせると感じています。