JavaScript で動的に生成された要素にイベント ハンドラーを効率的に割り当てるにはどうすればよいですか?

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

HTML ドキュメント内に複数のアンカー タグなどの要素が動的に生成されていると仮定します。 。これらの各要素にイベント ハンドラーを割り当てるには、次のようなループの使用を検討できます:

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

ただし、すべてのハンドラーが同じ i 変数を共有するため、このアプローチでは望ましい動作が得られません。 。その結果、最後のハンドラーのみが割り当てられ、値 "11" が常に警告されます。

この問題を解決するには、i を引数として受け取るハンドラーごとに個別の関数を使用できます。これにより、各ハンドラーが独自の i 変数を持つことが保証されます:

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

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

この手法を利用すると、各ハンドラーに固有の i 値が割り当てられ、各ハンドラーが正しい値を通知することで望ましい動作が実現されます ( 1 ～ 10)。

以上がJavaScript で動的に生成された要素にイベント ハンドラーを効率的に割り当てるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。