詳解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只支援單一事件，會被其他onclick事件覆蓋，而事件綁定中的點擊事件可以添加多個事件而不用擔心被覆蓋。那麼，可想而知，點擊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<10，此時已不滿足條件，所以終止循環，最終i值為10。那麼自然也就明白，為什麼最終結果是10個結果為10的彈跳窗。

總結：這段程式碼看似簡單，卻涵蓋了事件綁定、普通事件、for迴圈等多個知識點。

以上是詳解JavaScript的for迴圈中嵌套一個點擊事件的問題解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！