相信大家都遇到过类似的问题，for循环绑定完事件最后执行的时候都是最后一个事件相同，比如这段代码
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var list_obj = document.getElementsByTagName('li');
for (var i = 0; i <= list_obj.length; i++) {
list_obj[i].onclick = function() {
alert(i);
}
}
</script>
</body>
点击的时候弹出的不是0 1 2 3 4，而是5。
解决方案也很多种，比如可以新建一个function设置一个私有方法，然后每次new一个object然后再绑定到它的方法上。
还有就是闭包，写法相对简单：
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var list_obj = document.getElementsByTagName('li');
for (var i = 0; i <= list_obj.length; i++) {
(function(){
var p = i
list_obj[i].onclick = function() {
alert(p);
}
})();
}
</script>
</body>
就是每个循环加上闭包，然后设置一个临时变量，问题解决。
这个问题遇到过多次了，每次都要烦一下，今天记录之。
分享到：
相关推荐
综上所述，在JavaScript中，特别是在使用for循环绑定事件时，若要解决每个事件绑定时参数不同的问题，闭包提供了一种有效的解决方案。通过使用闭包，我们可以确保事件处理函数能够正确地引用到在循环中期望的变量值...
在文档中提到的示例中，作者探讨了在循环中绑定onclick事件的常见错误做法，并提供了一个正确的解决方案。 ### 错误的事件绑定方法 文档中首先展示了一个错误的做法： ```javascript $(function(){ for(var i=1; i...
标题中提到的关键概念包括JavaScript闭包、传参以及事件循环绑定。这三个概念在JavaScript编程中非常关键，它们的使用方法和特性对于构建Web应用的交互行为有着直接的影响。 在描述中提到循环绑定事件的问题，通常...
本文将详细介绍在JavaScript中循环动态绑定带参数函数时可能遇到的问题，并提供解决方案。 首先，我们来看看不带参数的事件绑定方法，使用attachEvent方法，如下所示： ```javascript document.getElementById(...
### Js内存泄漏及解决方案 #### 一、理解内存泄漏 在JavaScript中，内存泄漏是指由于某种原因导致不再使用的变量或对象仍然占据着内存空间，从而无法被垃圾回收机制（Garbage Collection, GC）释放，这将导致应用...
如果不愿意使用文档就绪事件，另一种解决方案是将引用的JavaScript文件放在HTML文件的底部，即`</body>`标签之前。这样可以确保当JavaScript代码运行时，所有DOM元素都已经创建。在问题描述的第二个方法中，推荐的...
在JavaScript编程中，批量为元素绑定事件是一种常见的需求，但如果不正确处理，可能会遇到一些问题。当使用for循环为多个元素绑定点击事件时，你可能会发现所有元素的事件回调函数都使用了最后一次循环变量的值，这...
根据给定文件中的内容，我们可以分析以下几种常见的JavaScript内存泄漏场景及其解决方案： 1. 全局变量的不当使用 在一些早期的JavaScript代码中，开发者可能会不自觉地使用全局变量来存储需要持久使用的对象。例如...
本篇文档将深入探讨系统兼容性的解决方案，主要关注跨平台支持、数据库适配、前端浏览器兼容性以及JavaScript新特性的兼容处理。 首先，跨平台兼容性主要依赖于Java的特性。Java程序通过javac命令编译为字节码文件...
本文将深入探讨一个常见的闭包问题——循环绑定处理程序，即在遍历元素并为它们添加事件监听器时可能出现的问题，并提供几种解决方案。 在初始的例子中，开发者尝试为四个按钮（id分别为btn1到btn4）添加点击事件，...
7. **兼容性处理**：考虑到不同的浏览器对CSS3和JavaScript的支持程度，可能需要引入polyfill或者使用更兼容的解决方案。 8. **响应式设计**：为了适应不同设备的屏幕大小，幻灯片组件应具备响应式布局，根据屏幕...
### 常见的JavaScript内存泄露原因及解决方案 #### 引言 在现代Web开发中，JavaScript已成为构建复杂用户界面的主要编程语言之一。随着应用程序变得越来越庞大与复杂，有效地管理和优化内存成为确保应用性能和用户...
一个常见的解决方案是使用`$timeout`服务，这个服务是AngularJS中封装的JavaScript原生的`setTimeout`函数，它允许开发者在AngularJS的下一个事件循环结束之后执行函数，即等待当前的数据绑定和视图渲染操作完成后才...
这是一个有效的解决方案，因为它确保在重新绑定事件处理函数之前，已经存在的事件监听器都被清理掉。修改后的代码如下： ```javascript // 清除table的所有click事件 $("table tbody tr").unbind("click"); // ...
本文将详细介绍如何在Vue中实现从指定下标开始循环列表的多种解决方案。 首先，我们需要了解Vue中v-for指令的基本用法。v-for允许我们使用“item in items”的语法来遍历items数组，其中items是你想要迭代的数组，...
6. 轮播组件：自动循环显示列表项目类似轮播效果，常见的轮播组件如Swiper或carousel组件，它们提供了一套完整的解决方案，包括自动播放、触碰滑动、分页指示器等功能。开发者可以根据需求选择合适的库来集成到项目...