js中用for循环事件绑定的小问题

最新推荐文章于 2022-01-08 15:36:14 发布
最新推荐文章于 2022-01-08 15:36:14 发布
阅读量292 收藏 1
点赞数

在js中，如果用for循环进行事件绑定，可能会遇到一点小问题，看下面第一个示例，无论点击哪个div，都会弹出3，即length。

因为这相当于事件绑定的同时，并没有把所对应的i进行一起绑定，i的值是最后一个值，即3。

示例1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 3px;
        }
    </style>
    <script>
        window.onload = function () {
            var add_the_handlers = function (nodes) {
                var i;
                for (i = 0; i < nodes.length; i++) {
                    nodes[i].onclick = function (e) {
                        alert(i);
                    };
                }
            };
            var divs = document.getElementsByTagName('div');
            add_the_handlers(divs);
        }
    </script>

    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>

</html>

再看下面两个例子，通过事件绑定的同时，通过函数调用而不是函数定义进行i与事件的绑定。

示例2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin-bottom: 3px;
    }
</style>
<script>
    window.onload = function () {
        var add_the_handlers = function (nodes) {

            var helper = function (index) {
                return function (e) {
                    alert(index);
                };
            };

            var i;
            for (i = 0; i < nodes.length; i++) {
                nodes[i].onclick = helper(i);
            }
        };
        var divs = document.getElementsByTagName('div');
        add_the_handlers(divs);
    }
</script>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

 

示例3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 3px;
        }
    </style>
    <script>
        window.onload = function () {
            var add_the_handlers = function (nodes) {
                var i;
                for (i = 0; i < nodes.length; i++) {
                    (function (i) {
                        nodes[i].onclick = function () {
                            alert(i);
                        };
                    })(i);
                }
            };
            var divs = document.getElementsByTagName('div');
            add_the_handlers(divs);
        }
    </script>

    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>

</html>

 

weixin_33928467
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 在for循环中绑定事件
一蓑烟雨的专栏
11-30 3699
有时候要对响应一堆相似的事件，但是每个事件的参数都不同，一开始还以为挺简单的，用个for循环不就得了，结果发现，额，都是使用了最后一个参数。。。 上网查资料！！！结果大神说用闭包解决 代码： for(var i=0;i<10;i++){ btns[i].onclick=(function(i){ return function(){alert(i)} })(i) } 大概原
js在for循环中绑定事件
03-20 122
本来想着直接通过js代码来点击事件时让div的宽度变化然后写了如下的代码 但是无论如何点击都一下子显示完全部的宽度； 然后网上通过很久查找网上的资料改成如下： 就能够显示出我想要的效果了； 纵观这样的代码现象，才明白是因为闭包的问题，上图中的变量i直接引用了父函数中的i,所以在循环结束后才将最终的值传给了 子函数，而下图则只是引用了父函数中的i的值， 转载于:http...
for循环绑定事件问题
aidingkui7609的博客
06-10 124
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 循环添加点击事件
qq_51999757的博客
09-12 3902
使用for循环添加点击事件时，获取i值的方法 比如页面上有一个ul，数个li，现在给li添加点击事件。 var li = document.getElementsByTagName("li"); 　　for(var i = 0; i < li.length; i++) { li[i].addEventListener("click",function () { console.log(i); }) } 但是，这样写之后我们发现，点击任何一个li，打印的值都为5，这是因为闭包中共用i值
JS17-循环遍历添加事件
DcTbnk的博客
04-02 936
一.事件1 <body> <ul> <li>我是第一个li</li> <li>我是第二个li</li> <li>我是第三个li</li> <li>我是第四个li</li> <li>我是第五个li</li> </...
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
在Vue.js中，`v-for`指令用于循环遍历数组或对象，生成多个DOM元素。当使用`v-for`与`input`或`select`元素结合时，我们常常需要监听这些表单元素的值变化，以便在值发生变化时执行相应的操作。本文将详细介绍如何在...
微信小程序开发猜数字游戏
03-29
6. **数据绑定**：在WXML和JS之间传递数据，通常使用数据绑定。例如，你可以在WXML中用`{{}}`包裹变量名来显示数据，同时在JS中通过`this.setData()`来更新数据。 7. **事件处理**：微信小程序支持多种事件，如点击...
微信小程序开发-扫雷小游戏案例源码.zip
08-15
这些都需要在JS文件中用条件语句和循环来实现。 5. **API使用**：可能包含对微信API的使用，例如使用`wx.showModal`弹出提示框告知用户是否踩雷，或者使用`wx.setStorageSync`存储用户的分数等信息。 6. **生命...
js-cours:关于Vania JavaScript和Jquery的所有我的笔记
03-10
变量在JavaScript中用于存储数据，可以动态地改变其值。数据类型包括基本类型（如字符串、数字、布尔值）和引用类型（如对象和数组）。理解数据类型的特性对于优化代码性能至关重要。 控制结构是程序的骨架，通过if...
Timer:带有小型项目的存储库
03-31
3. **定时器API**：`setTimeout` 和 `setInterval` 是JavaScript中用于定时任务的API，理解它们的工作原理以及如何清除定时器至关重要。 4. **事件驱动编程**：计时器往往与事件绑定，例如用户触发的开始/停止按钮...
js中for 循环绑定事件（转载）
zhouhe_的博客
05-04 461
for循环绑定事件 weixin_43625760 2020-06-08 01:02:16 ...
JavaScript - for循环绑定事件不生效的问题
Charonmomo的博客
08-12 1088
下面代码是为了实现一个类似相册的功能, 为了加快速度只加载小图, 当用户点击小图的时候才在下面的框中显示对应的大图. 初始的大图是一张空白图片. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
for循环遍历失败的原因（闭包问题）附四种解决办法完整代码
willwe的博客
06-10 3488
for循环中的闭包问题 在for循环的使用中有时会遇到以下问题： <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> var li=documen
js实现form的submit请求
日常笔记/总结/系列知识梳理
05-23 5074
代码 /** * 登录 * created by lius on 2020-05-23 * */ loginCA(){ // 创建表单 var dlform = document.createElement('form'); dlform.style = "display:none;"; dlform.method = 'get'; dlform.action = this.$api.paths.ssopath + '/v1/weblogin/check/user/redirect';
为什么document.form1.submit()不会自动提交？
疯狂的小程序员
06-15 5297
本文转载自：IT摆渡网 --一个按难度收费的IT实时问答平台！快速解决你的任何技术问题！-- www.itbaiduwang.com 如果是PHP的网页，比如**.php，那么只有网页没有任何输出的时候，才能自动提交！而且要没有submit这个按钮才能自动提交，比如下面这样： document.form1.submit(); 只有这样，才可以自动提交！
JS之for循环提交控制
iteye_7896的博客
06-26 534
最近做一个登陆页面， 登陆之前需要提交验证U盾里面用户信息，总长1800多个字符（除了中文，里面各种字符都有） 用的原始Serverlet，进入系统后form用POST自动向后台提交U盾的服务器请求验证。   开发的时候是同事做的，做好之后提交到客户那边，问题开始来了：除了IE7模式下可以能过，其余都不行！被客户叫去训了一顿，项目打回来问题分配到我这边。   用Debug模式下发现，...
html点击事件submit,HTML_表单Form的submit事件不响应，一、问题描述 当用JS调用form - phpStudy...
weixin_35935264的博客
06-05 686
一、问题描述当用JS调用form的方法submit直接提交form的时候，submit事件不响应。为什么？知道的请回复。类比一下，我用input.select()做了测试，却能响应select事件。这个原因先放一边，我们看看先怎么把眼下的问题解决了。不响应事件的代码示例：var form = document.getElementById('form1');form.onsubmit = func...
JavaScript循环绑定事件问题及解决方法
m0_58510118的博客
01-08 1367
html代码 <ul> <li>Lorem.<button>删除</button></li> <li>Commodi.<button>删除</button></li> <li>Tenetur!<button>删除</button></li> <li>Corrupti?&l
js 中用for循环 遍历set
最新发布
04-22
集合的方法是什么？ 遍历 Set 集合可以使用 for...of 循环来完成。使用 Set 实例的 entries()、values() 或者 keys() 方法获取迭代器，然后使用 for...of 循环来遍历返回的迭代器即可。例如： ```js const mySet = new Set([1, 2, 3, 4]); for (const value of mySet) { console.log(value); } ``` 上述代码将遍历 Set 实例 mySet 中的每个元素，并将其打印到控制台中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值