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
addEventListener循环绑定出现的问题的更多相关文章
- JS中循环绑定遇到的问题及解决方法
本文是原创文章,如需转载,请注明文章出处 在工作中,有时会有这样的需求:在一个页面上添加了6个按钮,然后分别为他们绑定点击事件监听器,当点击按钮1时,输出1,当点击按钮2时,输出2. 循环绑定代码如下 ...
- 由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时 不一致的bug,各种解决方案。
由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时 不一致的bug,各种解决方案. 动态在页面上添加了5个按钮,实现的功能应该是点击对应按钮在控制台输出相应的索引.但因为应该 ...
- javascript闭包传参和事件的循环绑定
今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br>< ...
- dom元素循环绑定事件的技巧
以前总觉得自己写的代码不太规范,尤其是写原生的时候.举个例子: 要为页面上所有".a"的元素绑定事件,当然了用jquery很方便:$('.a').bind("click& ...
- JavaScript利用闭包循环绑定事件
我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href=& ...
- 关于 DropDownList 循环绑定中遇到的问题
1绑定DataTable 简单直接下部分就ok了 this.DropDownList1.DataSource = DataTable; this.DropDownList1.DataTextField ...
- js的事件循环绑定和jQuery的隐式迭代
js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...
- 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作
页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...
- 小程序实践(五):for循环绑定item的点击事件
微信展示列表效果借助于 wx:for 简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的 ...
随机推荐
- 只需三步 快速完善网站Sitemap
越来越多的SEOer把优化的重点放在了站内优化上,细心的朋友应该查看一些前辈的robots.txt的时候不难发现,他们的robots中都加 入了一句Sitemap: http://www.dewang ...
- quartz(1)
关于定时任务的操作方法,java语言本身具有 Timer 来解决,但Timer 作用起来不是特别的舒服,由于项目的需要,使用了Quartz 这个调度框架,现把学习过程记录下来,方便以后查阅. 本教程是 ...
- cx_oracle 执行cur.execute(sql)提交数据出现 UnicodeEncodeError: 'ascii' codec can't encode character u'\u2122' in position 170
还是中文字符的问题, 解决方法见链接:http://www.oracle.com/technetwork/articles/tuininga-cx-oracle-084866.html import ...
- dfs序
dfs序比较重要的性质:一棵子树的所有节点在dfs序里是连续一段,主要就是利用这个性质来解题 题型一:对某个点X权值加上一个数W,查询某个子树X里所有点权值和. 解:列出dfs序,实现修改一个数,查询 ...
- HTML 字符实体
原文地址 在 HTML 中,某些字符是预留的. 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签. 如果希望正确地显示预留字符,我们必须在 HTML 源 ...
- JS自动格式化输入的数字/千位分隔符
<script> function cc(s){ if(/[^0-9\.]/.test(s)) return "invalid value"; ...
- 【总结】matlab求两个序列的相关性
首先说说自相关和互相关的概念. 自相关 在统计学中的定义,自相关函数就是将一个有序的随机变量系列与其自身作比较.每个不存在相位差的系列,都与其都与其自身相似,即在此情况下,自相关函数值最大. 在信号 ...
- Oracle虚拟索引,大表或生产环境下预估索引效果的好东西
在数据库优化过程中,索引的重要性是不言而喻的,但是在我们进行性能调整过程中, 一个索引是否能够被使用到,在索引创建之前是存在不确定性的. 而创建索引又是一个代价很高的操作,尤其是数据量很大的情况下,在 ...
- xcode8让真机测试支持ios8.0以下版本
xcode8支持ios8以下真机测试方法: 1.应用程序-xcode 显示包内容-Contents-Developer-Platforms-iPhoneOS.platform-DeviceSuppor ...
- android安装busybox
大家是否有过这样的经历,在命令行里输入adb shell,然后使用命令操作你的手机或模拟器,但是那些命令都是常见Linux命令的阉割缩水版,用起来很不爽.是否想过在Android上使用较完整的shel ...