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对应的 ...
随机推荐
- API测试
API(Application Programming Interface)包含: 单元测试(Unit Testing).模块测试(Module Testing).组件测试(Component Tes ...
- 每天的代码review和解决技术难题
在此结构中,一个 PPC 处理器作为监管处理器,与大量的 SPE流处理器相连通,组成了一个工作流水线. 对于一个图形处理过程来说,某个 SPE 可负责提取数据,另一个 SPE 负责变换,再另一个负责存 ...
- Maven安装最佳实践(Windows平台)
第一步:下载maven,解压缩. 在maven官网下载maven文件,这里我下载的是"apache-maven-2.2.1-bin.zip",如果需要maven的源代码,可以选择下 ...
- 《java编程思想》读书笔记 暂停一段时间,改为上面的练习题
发现个很尴尬的现象.我一天实在看得太快了...全写下 写博客都得一晚上.. 之前因为是第一次看这么厚的书,别人都说很难,以为会看很慢的.然而,已经完全学过Java的 我感觉没啥压力,越看越快....第 ...
- kuangbin_SegTree M (HDU 4553)
put my gezi这句话不得不说我看了好几秒才反应过来什么意思(你咋不上天呢 目测了一下也是区间合并 但是是成段更新的区间合并 但是!我终于!自己!写出来了! 嗯还算是比较顺利的 query的地方 ...
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...
- AT指令获取基站信息
AT+CREG 网络注册和漫游 命令发送(command): AT+CREG=<mode> 命令响应(Response): +CREG :<mode&g ...
- zabbix3.0安装【server】
关于zabbix的介绍,就不多说了,功能强大,架构前卫,自己直接去官网研究 在这里,还是秉承研究一个应用或者技术,都要自己动手安装部署,实战操作,才能深入掌握,基于这个精神,zabbix从安装部署开始 ...
- firefox 下event事件失效的解决方法
var evt = arguments.callee.caller.arguments[0] || window.event; evt.preventDefault(); evt.stopPropag ...
- ionic 启用sass
转入ionic项目目录,命令行下执行:ionic setup sass 提示编译器未装: You have specified Ionic CI to set up sass.However, you ...