JavaScript でイベント ハンドラーを動的に生成するときにクロージャの落とし穴を回避するにはどうすればよいですか?

JavaScript でループを使用してイベント ハンドラーを動的に生成する方法

特定のシナリオでは、イベント ハンドラーを一連の要素に割り当てることが必要になります。 Javascript を通じて動的に生成され、「イベント ハンドラーによるループ」と呼ばれることがよくあります。この問題は、インライン イベント ハンドラーを使用するのではなく、生成された要素に同様の機能があり、独自の動作を持つイベント ハンドラーを必要とする場合に発生します。

10 個の がある例を考えてみましょう。 AJAX 応答から生成されたタグがあり、ループ内の各タグに onclick イベントを割り当てたいとします。次のコードは簡単な解決策のように思えます:

for (i = 1; i < 11; i++) {
  document.getElementById("b" + i).onclick = function () {
    alert(i);
  };
}

しかし、このコードは実行時に onclick イベントを最後の に割り当てるだけです。タグが付けられ、すべてのクリックに対してアラート ボックスに「11」が表示されます。この動作の理由は、すべてのイベント ハンドラーが同じ i 変数を共有し、この変数がループ内でインクリメントされ、最終的に最後に生成された を指すという事実にあります。

この問題に対処し、それぞれの タグには独自の一意のイベント ハンドラーがあるため、ハンドラーごとに個別の関数を定義し、i 値をパラメーターとして渡す必要があります。そうすることで、各ハンドラーは i 変数の独自のインスタンスを持ち、意図した機能を維持します。

function handleElement(i) {
  document.getElementById("b" + i).onclick = function () {
    alert(i);
  };
}

for (i = 1; i < 11; i++) {
  handleElement(i);
}

この改訂されたコードは、各 に個別の onclick イベント ハンドラーを割り当てます。タグ、および の場合タグをクリックすると、予期される動作を反映した正しい i 値がアラート ボックスに表示されます。この手法を使用すると、一連の要素のイベント ハンドラーを動的に生成し、個々の要素のイベントを適切に処理できるようになります。

以上がJavaScript でイベント ハンドラーを動的に生成するときにクロージャの落とし穴を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。