JavaScript ループのイベント ハンドラーにクロージャが必要なのはなぜですか?

JavaScript ループ内のイベント ハンドラー: クロージャの必要性

JavaScript では、ループ内でイベント ハンドラーを操作するときに、次のことが必要になる場合があります。適切なパラメータの受け渡しを保証するためにクロージャを実装します。次のコードを考えてみましょう。

<code class="javascript">for (var i = 0; i < blah.length; i++) {
  var select = document.createElement('select');
  select.onchange = function() {
    onStatusChanged(select, callid, anotherid);
  };
}

このシナリオでは、onchange イベントが発生すると、onStatusChanged() に渡される値はすべての で一貫しています。

これは、JavaScript イベント ハンドラーがクロージャを作成し、関数内の callid と anotherid への参照が最終値を参照するために発生します。ループが完了した後。この問題を解決するには、各反復中にパラメータの現在の値をキャプチャするクロージャが必要です。

パラメータを渡すためのクロージャの実装

パラメータの値をコピーするには各反復中にパラメータを使用して、次のようにクロージャを実装します。

<code class="javascript">for (var i = 0; i < blah.length; i++) {
  var select = document.createElement('select');
  select.onchange = function(s, c, a) {
    return function() {
      onStatusChanged(s, c, a);
    };
  }(select, callid, anotherid);
}

この更新されたコードでは:

• クロージャは、自己実行関数 return function() { } を使用して作成されます。
• イベント ハンドラー関数は、s (

要素)、c (現在の callid)、および a (現在の anotherid) の 3 つの引数をパラメーターとして受け取ります

クロージャはすぐに呼び出しますs、c、および a の現在の値を渡す関数。

onchange イベントが発生すると、クロージャが実行され、onStatusChanged() が各 に対して正しい値を受け取るようにします。要素の反復。

以上がJavaScript ループのイベント ハンドラーにクロージャが必要なのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript for select using Event copy function this issue

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery を使用して div の内容を変更するにはどうすればよいですか?次の記事：jQuery を使用して div の内容を変更するにはどうすればよいですか?

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

• ホームページ

• コース

• に質問

• 私の

• ホームページ
• コース
• 記事
• に質問
• 辞書
• マニュアル
• ダウンロード
• 特集

ホームページ

記事

に質問

コース

特集

ダウンロード

ゲーム

辞書

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）