ループを使用して JavaScript で動的に生成された要素にイベント ハンドラーを適切に割り当てる方法

JavaScript でのループによるイベント ハンドラーの生成

動的 Web ページを操作する場合、多くの場合、イベント ハンドラーを複数の要素に割り当てることが必要になります。プログラムで生成されます。これはループを使用することで実現でき、効率的かつ一元的な処理が保証されます。

一般的なシナリオの 1 つは、AJAX 応答から複数のアンカー タグ (a) を生成することであり、各タグには対応する番号を警告する onclick イベントが必要です。 。ただし、次のような単純なループ アプローチは意図どおりに機能しない可能性があります:

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

この例では、すべてのイベント ハンドラーが同じ変数 i を共有するため、最後のハンドラーが前のハンドラーを上書きし、アラートが発生します。

この問題を解決するには、ハンドラーごとにクロージャーを作成し、パラメーターとして i を渡すことが重要です。これにより、すべての関数が独自の一意の i 値を持つことが保証されます。

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

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

handleElement 関数を使用すると、各イベント ハンドラーに一意の i が割り当てられ、対応するアンカーが実行されたときに正しいアラート メッセージが表示されるようになります。タグがクリックされました。

以上がループを使用して JavaScript で動的に生成された要素にイベント ハンドラーを適切に割り当てる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。