addEventListener循环绑定出现的问题

今天 碰到这样一个问题 代码如下

  var someth = document.getElementsByTagName("a");
            for (var i = 0; i < 10; i++) {
                someth[i].addEventListener("click", function () { alert(i) })
            }

  发现出问题了,每次都alert出同一个值 10  在网上找了找资料 发现原来是闭包导致的。

  我这里只贴两种解决方法吧。

  方法一:循环的时候给someth[i]一个属性,这样alert出的 i 的值才会改变。

 var someth= document.getElementsByTagName("a");
            for (var i = 0; i <10; i++) {
                someth[i].num = i;
                someth[i].onclick = function () {
                    alert(this.num);
                }
            }

  方法二:在函数外面在嵌套一个函数.

var someth = document.getElementsByTagName("a");
for (var i = 0; i < 10; i++) {
                someth[i].addEventListener("click", (function (num) {
                    return function () {
                        alert("i am link" + num);
                    }
                })(i), "false");
            }

PS:附上我看的资料  http://segmentfault.com/q/1010000000626710

时间: 2024-11-09 06:21:57

addEventListener循环绑定出现的问题的相关文章

浅谈JS闭包中的循环绑定处理程序

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 前几天工作中写前端js代码时,遇到了遍历元素给它添加单击事件. (PS:之前也在<jQuery基础教程>第四版中看过讲循环绑定处理程序的内容,当时估计也没怎么用心看,所以没记起来.) 大神要是知道这类情况,可以关掉窗口,写这些主要是给像我一样的小白看的,谢谢! 先贴上错误的例子让大家

JS闭包中的循环绑定处理程序

前几天工作中写前端js代码时,遇到了遍历元素给它添加单击事件.就是这个问题让我整整调了一个下午.最后还是下班回家,上网查资料才知道怎么解决的. (PS:之前也在<jQuery基础教程>第四版中看过讲循环绑定处理程序的内容,当时估计也没怎么用心看,所以没记起来.) 大神要是知道这类情况,可以关掉窗口,写这些主要是给像我一样的小白看的.谢谢! 先贴上错误的例子让大家看看.(例子里面用到jQuery,请导入jQuery库) <!DOCTYPE html PUBLIC "-//W3C/

循环绑定多个事件--闭包

首先说明一下错误写法每次都弹出5的原因: for(var i=1;i<=4;i++){ //给下面这行的i叫“第一个i” $("#addShopCar"+i).click(function () { //给下面这行的i叫“第二个i” alert(i); }) } 其实原因就是每次循环里,第一个i是确定赋值了的,而第二个i,由于它本身处在一个函数定义中,在真正被调用之前他都会随着循环计数器中的i的变化而变化.如果想让每个循环绑定的函数弹出的i是不一样的i,就要在定义之后立即执行,而

js循环绑定事件

在js中,用循环来为一对元素队列的元素绑定事件,是一个常见的问题. 通常进入误区的新人,都会这么写代码: (假设元素队列为o,默认使用jQuery) //error method var o =$('.blockHead'); for(var i=0; i<o.length; i++){ o[i].onclick = function(){ function(i){ alert(i); } } } 当然这种情况下,你会发现每个元素点击运行时,显示的 i值 都是 o.length-1: 因为js的

关于 DropDownList 循环绑定中遇到的问题

1绑定DataTable 简单直接下部分就ok了 this.DropDownList1.DataSource = DataTable; this.DropDownList1.DataTextField = "Name"; this.DropDownList1.DataValueField = "id"; this.DropDownList1.DataBind(); 但是如果循环绑定就有几个坑 this.DropDownList1.Items.Insert 绑定设置一

JavaScript利用闭包循环绑定事件

我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href="#">首页</a> <a href="#">作品</a> <a href="#">文章</a> <a href="#">工具</a> <

前端(十三)—— JavaScript高级:回调函数、闭包、循环绑定、面向对象、定时器

回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callback) { // 函数回调,判断回调函数是否存在 if (callback) callback(data); } func(callback); // 函数回调的本质:在一个函数中(调用函数),当满足一定条件,调用参数函数(回调函数) // 回调函数作为调用函数的参数传入,满足一定的条件,调用回调函数

01 《i》控制字体大小 v-for循环绑定类名

1==>控制字体图标的大小用 font-size:16px; <i class="el-icon-arrow-left right-show-aside-icon"></i> 2==>自己写的卡片布局shadow="never" 没有阴影 用了element-ui 2.4.11 <!-- 卡片 --> <el-card class="box-card note-car-box" shadow=

遇到的问题(JS循环绑定事件)

问题描述:想通过循环的方式给HTML元素绑定事件,结果失败---总是会只能绑定到最后一个元素. HTML <div id="bnts"> <span></span> <span></span> <span></span> <span></span> </div> JS var bnts = document.getElementById("bnts"