JavaScriptのforループ内でクリックイベントをネストする問題の解決策の詳細な説明

この記事では、JavaScriptのforループにクリックイベントをネストして、複数の同じ値を一度にポップアップさせるための解決策を主に紹介していますが、参考値が高いです。以下のエディターで見てみましょう

まず、次のコードを見てみましょう:

for(var i=0; i<10; i++) {
 $(&#39;#ul&#39;).bind(&#39;click&#39;, function() {
  alert(i)
 })
}

このコードでは、ID が「ul」の要素をクリックすると、10 個の 10 がポップアップ表示されます。 10 が 10 個表示されるのはなぜですか?

まず、このコードのクリックイベントはバインディングイベントではなくjQueryのバインディングイベントなので、バインディングイベントと通常のイベントには違いがあります。通常のイベントでは、複数のクリック イベントが要素に追加されると、最後のクリック イベントが以前のすべてのクリック イベントを上書きしますが、バインディング イベントでは、クリックの数に関係なく、最後のクリック イベントのみが実行されます。イベントが同じ要素にバインドされている場合、それらはすべて実行されます。つまり、通常のイベントの onclick は 1 つのイベントのみをサポートし、他の onclick イベントによって上書きされますが、イベント バインディングの click イベントは上書きされることを気にせずに複数のイベントを追加できます。したがって、ID が「ul」の要素をクリックすると、10 個のポップアップ ウィンドウが表示されることが考えられます。

それでも理解できない場合は、コードを変形すると理解しやすくなります。

実際、上記のコードは次の形式に変換できます:

// i=0时
$('#ul').bind('click', function() {
  alert(i)
 })
// i=1时
$('#ul').bind('click', function() {
  alert(i)
 })
 
......
 
// i=10时
$('#ul').bind('click', function() {
  alert(i)
 })

拡張: 次のコードは、通常のイベントとイベント バインディングの違いをさらに説明するために、上記の元のコードを比較したものです

for(var i=0; i<10; i++) {
 document.getElementById(&#39;ul&#39;).onclick = function() {
  alert(i)
 }
}

実行結果: 10

のポップアップ クリック イベントがトリガーされると、10 個のポップアップ ウィンドウがポップアップします。それで、何か質問があるでしょうか？なぜ10×10なのでしょうか？ 0、1、2、3...10ではないでしょうか？この疑問を解決するために、元のコードを再度変換できます。

var i=0
 
$('#ul').bind('click', function() {
  alert(i)
 })
i=1
$('#ul').bind('click', function() {
  alert(i)
 })
 
......
 
i = 9
$('#ul').bind('click', function() {
  alert(i)
 })

元のコードをこれに変換すると、i の最終値が 9 であることは明らかですが、for ループの原理によれば、 i が 9 の場合、i++ が実行され、i

概要: このコードは単純に見えますが、イベント バインディング、通常のイベント、for ループなどの多くの知識ポイントをカバーしています。

以上がJavaScriptのforループ内でクリックイベントをネストする問題の解決策の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。