ループ内でイベント リスナーを使用するときにクロージャの問題を回避するにはどうすればよいですか?

ループ内でイベント リスナーを使用する場合のクロージャの問題の回避

for ループを使用してイベント リスナーを複数の要素にアタッチしようとすると、すべてのリスナーが最後のオブジェクトをターゲットにしてしまうという問題が発生しました。これは、JavaScript でのクロージャの動作方法によるものです。

クロージャを理解する

関数がスコープ外で宣言された変数を参照する場合、関数は、たとえその変数へのアクセスを保持します。関数が終了した後。あなたの場合、ループ内で定義されたイベント リスナー関数は、ループの外で定義されている boxa と boxb を参照します。ループが完了すると、これらの変数はループ内の最後の要素を指します。

問題の修正

このクロージャーの問題を回避するには、すぐに呼び出される関数を使用できます。ループ内の式 (IIFE)。 IIFE は新しいスコープを作成するため、その中で宣言された変数には関数の外部からアクセスできません。

改訂されたコード

IIFE を配置した改訂されたコードは次のとおりです。

// Function to run on click:
function makeItHappen(elem, elem2) {
  var el = document.getElementById(elem);
  el.style.backgroundColor = "red";
  var el2 = document.getElementById(elem2);
  el2.style.backgroundColor = "blue";
}

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
  (function () {
    var k = i + 1;
    var boxa = elem[i].parentNode.id;
    var boxb = elem[k].parentNode.id;
    elem[i].addEventListener("click", function() {
      makeItHappen(boxa, boxb);
    }, false);
    elem[k].addEventListener("click", function() {
      makeItHappen(boxb, boxa);
    }, false);
  }()); // immediate invocation
}

IIFE を使用すると、各イベント リスナー関数が独自のスコープを持つようになり、クロージャーが防止されます。 問題。これで、各イベント リスナーはループ内の対応する要素を正しくターゲットにするようになります。

以上がループ内でイベント リスナーを使用するときにクロージャの問題を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。