ループを使用して作成された JavaScript イベント ハンドラーでの変数参照の重複を防ぐ方法

JavaScript でループを使用したイベント ハンドラーを生成するときに変数参照の重複を避ける方法

JavaScript でループを使用したイベント ハンドラーを作成する場合、次のことが重要です変数参照の問題に対処します。元の質問は、onclick イベントを複数の要素に割り当てるループが共有変数アクセスにより予期せぬ動作を引き起こす可能性があることを示しています。

この問題は、すべてのイベント ハンドラーが同じ変数を参照し、各反復で更新される場合に発生します。ループ。その結果、最後のイベント ハンドラーのみが変数の最終値を保持します。

これを解決するには、変数をパラメーターとして使用して、イベント ハンドラーごとに個別の関数を定義する必要があります。これにより、各ハンドラーが変数の独自のコピーを持つようになり、重複参照の問題が回避されます。

修正されたコードは次のとおりです:

// Define a function that takes the variable as a parameter
function handleElement(i) {
    document.getElementById("b" + i).onclick = function () {
        alert(i);  // Each handler has its own i
    };
}

// Iterate through the elements and call the function
for (i = 1; i < 11; i++) {
    handleElement(i);
}

このアプローチを使用すると、各イベント ハンドラーは独自のコピーを持ちます。専用の変数参照。期待どおりに動作し、対応する要素に基づいて正しい値を通知します。

以上がループを使用して作成された JavaScript イベント ハンドラーでの変数参照の重複を防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。