JavaScript for循环嵌套点击事件弹出10个10的原因解析

for循环嵌套点击事件现象

首先观察以下代码片段：

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

事件绑定与普通事件的区别

针对这段代码，当用户点击ID为“ul”的元素时，会连续弹出10次数字10。为什么会显示10个10？

原因在于，此处的点击事件并非普通事件，而是通过jQuery绑定的事件。普通事件与绑定事件存在显著差异：若对同一元素添加多个普通点击事件，后添加的事件会覆盖之前的所有事件，仅执行最后一个；而绑定事件允许在同一个元素上添加多个点击事件，且所有事件均会执行。因此，普通事件的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('ul').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，条件不满足，循环终止，最终i值为10。因此，所有绑定的点击事件在触发时读取到的i值均为10，导致弹出10个结果为10的弹窗。

总结

总结：这段代码看似简单，却涉及事件绑定、普通事件处理以及for循环执行原理等多个知识点。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！