JavaScript在for循环中绑定事件解决事件参数不同的情况_javascript技巧

有时候要对响应一堆相似的事件,但是每个事件的参数都不同,一开始还以为挺简单的,用个for循环不就得了,结果发现,额,都是使用了最后一个参数。。。

上网查资料!!!结果大神说用闭包解决

代码:

复制代码 代码如下:

for(var i=0;i<10;i++){
btns[i].onclick=(function(i){
return function(){alert(i)}
})(i)
}

大概原因是直接用btns[i].onclick=function(){alert(i)}时,JavaScript引擎会先将for循环里的代码执行完,

当用户出发onclick事件时,JavaScript会寻找i,结果会找到运算完成之后的i,也就是10

但是用闭包处理的话,i会成为函数的局部变量

时间: 2024-08-24 16:40:26

JavaScript在for循环中绑定事件解决事件参数不同的情况_javascript技巧的相关文章

JavaScript在for循环中绑定事件解决事件参数不同的情况

响应一堆相似的事件,但是每个事件的参数都不同,在这种情况下就可以使用JavaScript 在for循环中绑定事件,下面有个不错的示例,大家可以参考下 有时候要对响应一堆相似的事件,但是每个事件的参数都不同,一开始还以为挺简单的,用个for循环不就得了,结果发现,额,都是使用了最后一个参数...  上网查资料!!!结果大神说用闭包解决  代码:  代码如下: for(var i=0;i<10;i++){  btns[i].onclick=(function(i){  return function

JavaScript实现将数组中所有元素连接成一个字符串的方法_javascript技巧

本文实例讲述了JavaScript实现将数组中所有元素连接成一个字符串的方法.分享给大家供大家参考.具体如下: 下面的代码演示了JS中如何通过数组对象的join方法将数组元素连接成一个字符串输出 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to join the array elements into a string. </p> <butto

JavaScript实现从数组中选出和等于固定值的n个数_javascript技巧

现实生活中的问题,可能会抽象为这样一种数据模型: 从一个数组中挑选出几个数,让这几个数相加的和为指定的值. 大多数读者应该有过网购的经历,网购一般会有个凑单功能,假如读者买了70元的商品,但是必须满100元才能包邮,这时系统会自动推荐一些商品,加起来差不多就100块钱了. 系统如何确定推荐哪些商品呢?这其实就是刚刚提到的模型,我们可以把热销商品的价格放到一个数组中,然后利用算法,找出数组中哪些价格的和为30元. 废话少说,小菜给大家分享一个JavaScript版本的算法实现. 算法代码: fun

JQuery在循环中绑定事件的问题详解_jquery

有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 <input type="text" name="username" id="username_1" value="" /> <input type="text" name="username" id="username_2" value="" />

asp.net中绑定TextBox回车事件的解决方法_实用技巧

1.将页面上的回车事件都绑定到按钮上 复制代码 代码如下: function EnterTextBox(e) { var msie = (document.all) ? true : false; var keycode; if(!msie) keycode = window.event ? e.keyCode : e.which; else keycode = e.keyCode; //alert(keycode); if(keycode==13 && document.getEleme

JavaScript绑定事件监听函数的通用方法_javascript技巧

事件绑定的3中常用方法:传统绑定.W3C绑定方法.IE绑定方法.但是,在实际开发中对于我们来讲重要的是需要一个通用的.跨浏览器的绑定方法.如果我们在互联网上搜索一下会发现许多方法,以下是比较知名的几种方法: 在开始学期下面几种方法之前,应当讨论一下,一个好的addEvent()方法应当达到哪些要求: a.支持同一元素的同一事件句柄可以绑定多个监听函数: b.如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略: c.函数体内的this指向的应当是正在处理事件的节点(

spring 中如何在循环中绑定命令对象?

问题描述 我想显示一个列表给用户的编辑,如何进行绑定呢?想要的效果(DisplayName是一个输入框,用户能修改):IDNameDisplayName1AD-A2BD-B3CD-C...CommandClassClassUserForm{privateList<User>users;publicsetUsers(Listusers){...}publicListgetUsers(){...}}UserclassClassUser{privateStringid;privateStringna

Javascript中apply、call、bind的巧妙使用_javascript技巧

apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 先来一个栗子: function fruits() {} fruits.prototype = { color: "red", say: function() { console

JavaScript中的new的使用方法与注意事项_javascript技巧

原文: JavaScript, We Hardly new Ya  --Douglas Crockford.    http://yuiblog.com/blog/2006/11/13/javascript-we-hardly-new-ya/ 引用 JavaScript是一门基于原型的语言,但它却拥有一个 new 操作符使得其看起来象一门经典的面对对象语言.那样也迷惑了程序员们,导致一些有问题的编程模式. 其实你永远不需要在JavaScript使用 new Object().用字面量的形式{}去