js在for循环中绑定事件

最新推荐文章于 2022-02-20 16:13:13 发布
最新推荐文章于 2022-02-20 16:13:13 发布
阅读量134 收藏
点赞数
原文链接：http://www.cnblogs.com/dongcong/p/6591250.html
版权

本来想着直接通过js代码来点击事件时让div的宽度变化然后写了如下的代码

但是无论如何点击都一下子显示完全部的宽度；

然后网上通过很久查找网上的资料改成如下：

就能够显示出我想要的效果了；

纵观这样的代码现象，才明白是因为闭包的问题，上图中的变量i直接引用了父函数中的i,所以在循环结束后才将最终的值传给了

子函数，而下图则只是引用了父函数中的i的值，

转载于:https://www.cnblogs.com/dongcong/p/6591250.html

diaobi2589
关注
JavaScript 在for循环中绑定事件
一蓑烟雨的专栏
11-30 3714
有时候要对响应一堆相似的事件，但是每个事件的参数都不同，一开始还以为挺简单的，用个for循环不就得了，结果发现，额，都是使用了最后一个参数。。。 上网查资料！！！结果大神说用闭包解决 代码： for(var i=0;i<10;i++){ btns[i].onclick=(function(i){ return function(){alert(i)} })(i) } 大概原
for循环绑定事件问题
aidingkui7609的博客
06-10 137
for循环绑定事件。忽略中间过程中的绑定事件，解决办法是将中间过程中的绑定写成函数，通过循环传参完成绑定。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html x...
js中用for循环事件绑定的小问题
weixin_33928467的博客
02-22 307
在js中，如果用for循环进行事件绑定，可能会遇到一点小问题，看下面第一个示例，无论点击哪个div，都会弹出3，即length。 因为这相当于事件绑定的同时，并没有把所对应的i进行一起绑定，i的值是最后一个值，即3。 示例1 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...
循环中给元素绑定事件
luckyhenry的学习笔记
07-25 494
for(var i=0; i<10; i++){ $('#pages_div_' + i).bind('click', {index : i}, clickHandler); } function clickHandler(event){ $('#pages_div_' + event.data.index).children('.aplus_div').toggle();
JavaScript在for循环中绑定事件解决事件参数不同的情况
10-26
综上所述，在JavaScript中，特别是在使用for循环绑定事件时，若要解决每个事件绑定时参数不同的问题，闭包提供了一种有效的解决方案。通过使用闭包，我们可以确保事件处理函数能够正确地引用到在循环中期望的变量值...
JQuery在循环中绑定事件的问题详解
10-22
在使用JQuery进行DOM操作时，特别是在循环中为多个元素绑定事件，需要注意变量作用域以及事件绑定的正确方式。...通过这篇文章，读者可以深入理解JQuery循环绑定事件的机制，并在实际项目中正确应用这一技巧。
JavaScript的for循环中嵌套一个点击事件的问题解决
01-19
先看下面一段代码： for(var i=0; i<10; i++) { $('#ul').bind('click', function() { ...而在绑定事件中，则不一样，在同一个元素上，即使绑定再多的点击事件，都会全部执行。也就是说，普通事件中的o
VUE v-for循环中每个item节点动态绑定不同函数的实例
01-19
一. 业务场景： 一个title 处 可能有 一个...按钮个数 根据传入的数据length 来循环渲染， 每条数据对应的事件名称 通过动态绑定 三. 封装组件 1. 视图层面 2. 代码部分 2.1 结构部分 <!-- 多个button组件--> ...
JS中for循环绑定事件
qq_44888570的博客
11-10 5616
在网页中有五个按钮，需求为：点击按钮，将按钮的索引值输出。 初学JS时遇到的问题，今天学习bind方法时又想起来了，分享一下。 先看一下代码 var btns = document.querySelectorAll('button') for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { console.log(i) } } 此段代码，先是获取到所有的按
HTML中的for属性的用法
XuChang_webKaiFa的专栏
09-27 1567
大家会上京东那些网站去购物吧，当我们支付的时候系统会让我们去选择用哪一个银行去支付，然后列出N多的银行的logo,前面是一个单选按纽(如下图) ，我们是点击各个银行的logo，而不用去点那上单选，这种效果该怎么实现呢？也许有人一下就反应过来说用JS，没错，JS是可以实现，但是现在完全不用JS就可以实现 那就是用HTML中的元素的for就可以了，这个for属性只针对label标签有用，其
JS闭包导致循环给按钮添加事件时总是执行最后一个
热门推荐
博观约取，厚积薄发
02-05 1万+
今天再做需求时有一个功能是这样的，就是有不定个的按钮，且点击按钮时都需要执行一个方法（参数不一样） 那么我很自然的就想到了，循环给每个按钮添加事件和参数就好了，由于不方便上传系统代码，下面以一个简单例子来说明. 按钮1 按钮2 按钮3 按钮4 按钮5 比如现在要实现这么一个功能，在页面上点击上面的按钮1到按钮5时分别alert出
【Javascript】for循环中的绑定事件为什么要用this
weixin_43790653的博客
02-20 903
【Javascript】for循环中的绑定事件 先来看一段代码： <div class="box"> <ul> <li> <img src="images/4.jpg" alt=""> </li> <li> <img src="images/9.jpg" alt=""> </li>
JS在for循环中绑定事件的失效问题
qq_38712081的博客
08-14 5215
问题描述 一个简单的点击案例,我们需要实现通过点击改变按钮的值, 使用for循环去绑定onclick事件,但js绑定失效. 如下图 var btns = document.getElementsByTagName('input'); for (var i = 0; i &amp;amp;amp;amp;lt; btns.length; i++) {//for循环遍历...
js中for 循环绑定事件（转载）
zhouhe_的博客
05-04 513
for循环绑定事件 weixin_43625760 2020-06-08 01:02:16 ...
for循环中的事件绑定
jiandan1127的博客
07-19 2684
html &lt;button&gt;按钮1&lt;/button&gt; &lt;button&gt;按钮2&lt;/button&gt; &lt;button&gt;按钮3&lt;/button&gt; &lt;button&gt;按钮4&lt;/button&gt; &lt;button&gt;按钮5&lt;
对JQuery在循环中绑定事件的问题理解
RotatingBlock的博客
03-04 9216
对JQuery在循环中绑定事件的问题理解在昨天写网页时遇到了一个关于jQuery在循环中绑定事件后部分效果失效的问题，在这里分享一下解决方案
基于Go语言的疫情物资信息平台服务端设计源码
最新发布
09-25
该项目是一款采用Go语言编写的疫情物资信息平台服务端源码，包含57个文件，其中包括43个Go源文件、4个XML文件、2个Git忽略文件以及其他必要的配置和管理文件。该平台旨在提供疫情物资的实时信息管理和数据交换服务。
基于PHP的AquaticProduct水产品质量溯源系统设计源码
09-25
该系统是一款基于PHP开发的水产品质量溯源源码，综合运用HTML、CSS、JavaScript等技术，并涉及C和C语言，共包含616个文件。文件类型丰富，涵盖PHP、HTML、CSS、JavaScript等，旨在实现水产品的全流程质量追溯管理。
for循环中绑定canvas事件
06-03
您可以在for循环中使用addEventListener()方法绑定canvas事件。例如，假设您有一个id为"myCanvas"的canvas元素，您可以使用以下代码为每个canvas绑定click事件： ```javascript var canvases = document.querySelectorAll("#myCanvas"); for (var i = 0; i < canvases.length; i++) { canvases[i].addEventListener("click", function() { console.log("Canvas " + (i+1) + " clicked!"); }); } ``` 在这个例子中，我们使用querySelectorAll()方法获取所有id为"myCanvas"的canvas元素，然后使用for循环为每个canvas绑定click事件。在click事件处理程序中，我们使用console.log()方法输出被点击的canvas的编号。请注意，在click事件处理程序中，我们可以访问循环变量i的值，因为JavaScript中的变量作用域是函数级别的，而不是块级别的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值