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

  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

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

  1. JS中循环绑定遇到的问题及解决方法

    本文是原创文章,如需转载,请注明文章出处 在工作中,有时会有这样的需求:在一个页面上添加了6个按钮,然后分别为他们绑定点击事件监听器,当点击按钮1时,输出1,当点击按钮2时,输出2. 循环绑定代码如下 ...

  2. 由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时 不一致的bug,各种解决方案。

    由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时 不一致的bug,各种解决方案. 动态在页面上添加了5个按钮,实现的功能应该是点击对应按钮在控制台输出相应的索引.但因为应该 ...

  3. javascript闭包传参和事件的循环绑定

    今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br>< ...

  4. dom元素循环绑定事件的技巧

    以前总觉得自己写的代码不太规范,尤其是写原生的时候.举个例子: 要为页面上所有".a"的元素绑定事件,当然了用jquery很方便:$('.a').bind("click& ...

  5. JavaScript利用闭包循环绑定事件

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

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

    1绑定DataTable 简单直接下部分就ok了 this.DropDownList1.DataSource = DataTable; this.DropDownList1.DataTextField ...

  7. js的事件循环绑定和jQuery的隐式迭代

    js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...

  8. 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  9. 小程序实践(五):for循环绑定item的点击事件

    微信展示列表效果借助于 wx:for  简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的 ...

随机推荐

  1. Adobe After Effects工程使用aep格式来存储

    写页面的时候发现好几处的按钮都是这种样式,于是把这个按钮的样式单独提取出来放着全局css文件中 .base-btn { display: block; width: 90%; height: 54px ...

  2. python pickle 序列化类

    python pickle 序列化类 # coding:utf-8 try: import cPickle as pickle except ImportError: import pickle cl ...

  3. CentOS7 搭建python3 Django环境

    yum install gcc yum install make yum install openssl-devel -y yum install sqlite-devel -y wget https ...

  4. Beta版本发布说明

    发布地址 https://github.com/LongWerLingShi/DataObtainingAndHandling/tree/beta 版本开发背景 首先,应软件工程课程要求,我们小组针对 ...

  5. DNS学习笔记之DNS理论知识

    DNS: Domain Name System (将域名和ip地址相互转化) 域名是一个范围,例如baidu.com,.com.而www.baidu.com是个主机名,即FQDN: Full Qual ...

  6. js的一点

    1.js中实现继承的方法 1.js原型(prototype)实现继承 <SPAN style="<SPAN style="FONT-SIZE: 18px"&g ...

  7. nwjs 配置文件package.json 转载

    配置文件package.json nw在启动应用程序时,首先要读取package.json文件,初始化基本属性,下面我们看看package.json的完整参数.每个参数配置都标有注释. { /**指定 ...

  8. Atom安装activate-power-mode插件(震动炫酷)

    1.下载安装Atom,地址:https://atom.io/ 2.下载安装activate-power-mode插件,地址:https://github.com/JoelBesada/activate ...

  9. linux软raid练习

    创建一个空间大小为10G的raid5,要求其chunk为1024k,格式为ext4文件系统,开机可自动挂载至/backup目录,并支持acl功能: 1 2 3 4 5 6 7 8 9 10 11 12 ...

  10. MySql中常用的hint

    对于经常使用Oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在MySQL里,也有类似的hint功能.下面介绍一些常用的. 强制索引 FORCE ...