スコープの競合なしにイベント リスナーを複数のオブジェクトに割り当てる方法は?

反復関数を使用したイベント リスナーの割り当て

ループを使用してイベント リスナーを複数のオブジェクトに追加する場合、すべてのリスナーが同じオブジェクト、通常はループ内の最後のオブジェクトです。これは、JavaScript が変数スコープと関数クロージャーを処理する方法が原因です。

この問題に対処するには、次のアプローチを採用します。

// 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);
  }());
}

このコードでは、匿名関数が内部関数の周りにラップされています。スコープ、反復ごとにクロージャーを作成します。 '()' 演算子を使用して関数をすぐに実行することで、各反復に独自のプライベート スコープが設定され、内部の変数と関数が他の反復の変数と関数に干渉しないことが保証されます。

このアプローチでは、各イベント リスナーが許可されます。意図した変数にアクセスし、同じオブジェクトをターゲットとするすべてのリスナーの問題を解決します。

以上がスコープの競合なしにイベント リスナーを複数のオブジェクトに割り当てる方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。