今天看到一个javascript的题目，按常理循环绑定事件，但是得到的结果却不是想要的。

  1. <a href="#">text</a>
    <br>
    <a href="#">link</a>
  2. <script>
  3.     var as = document.getElementsByTagName('a');
  4.     for ( var i = as.length; i--; ) {
  5.         as[i].onclick = function() {
  6.             alert(i);
  7.             return false;
  8.         }
  9.     }
  10. </script>

1.这个代码点击链接弹出的i都是-1,这是为啥呢？

简单来说就是函数变量作用域问题，如果把function() {  alert(i);   return false;  } 当做一个函数 a();a()内部未定义变量i,但是内部使用了，于是向外查找,找到for循环里定义的i，点击事件是for循环完毕后才开始执行的，执行完毕后i的值已经变成-1；所以每次弹出的都是-1；

2. 2个参数的for循环也不常见！疑惑？

　　for（语句1，语句2，语句3）{

　　　　//todo

　　}

a.for循环条件

通常说语句1、语句2、语句3都是可选的。

b.语句 2：

　　通常语句 2 用于评估初始变量的条件。

　　语句 2 同样是可选的。

　　如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

　　提示：如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。

c.关于 i--判断：

　　判断i--true /false的时候是先判断i再运算i--的。进入最后一次判断 i--的时候其实判断 i==0的时候，判断后又执行了一次i--,for循环终止， 于是i的值变成了-1;

　　var i = 1;

　　!!i--;//ture

解决方法：

  1.     var as = document.getElementsByTagName('a');
  2.     for ( var i = as.length; i--; ) {
  3.         (function(i){
  4.             as[i].onclick = function() {
  5.                 alert(i);
  6.                 return false;
  7.             }
  8.         })(i)
  9.     }

或者：

  1.     var as = document.getElementsByTagName('a');
  2.     for ( var i = as.length; i--; ) {
  3.        var a = function(i){
  4.             as[i].onclick = function() {
  5.                 alert(i);
  6.                 return false;
  7.             }
  8.         }
  9.         a(i);
  10.     }

----------------------------------------------------------------------------------------------

其他网友7中解决方法demo：

  1. <html >
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.         <title>闭包演示</title>
  5.         <script type="text/javascript">     
  6.  
  7.             function init() {
  8.                 var pAry = document.getElementsByTagName("p");
  9.                 for( var i=0; i<pAry.length; i++ ) {
  10.                     pAry[i].onclick = function() {
  11.                         alert(i);
  12.                     }
  13.                 }
  14.             }
  15.         </script>
  16.     </head>
  17.     <body onload="init();">
  18.         <p>产品一</p>
  19.         <p>产品二</p>
  20.         <p>产品三</p>
  21.         <p>产品四</p>
  22.         <p>产品五</p>
  23.     </body>
  24. </html>

1、将变量 i 保存给在每个段落对象（p）上

  1. function init() {
  2.   var pAry = document.getElementsByTagName("p");
  3.   for( var i=0; i<pAry.length; i++ ) {
  4.      pAry[i].i = i;
  5.      pAry[i].onclick = function() {
  6.         alert(this.i);
  7.      }
  8.   }
  9. }

2、将变量 i 保存在匿名函数自身

  1. function init2() {
  2.   var pAry = document.getElementsByTagName("p");
  3.   for( var i=0; i<pAry.length; i++ ) {
  4.    (pAry[i].onclick = function() {
  5.         alert(arguments.callee.i);
  6.     }).i = i;
  7.   }
  8. }

3、加一层闭包，i以函数参数形式传递给内层函数

  1. function init3() {
  2.   var pAry = document.getElementsByTagName("p");
  3.   for( var i=0; i<pAry.length; i++ ) {
  4.    (function(arg){
  5.        pAry[i].onclick = function() {
  6.           alert(arg);
  7.        };
  8.    })(i);//调用时参数
  9.   }
  10. }

4、加一层闭包，i以局部变量形式传递给内存函数

  1. function init4() {
  2.   var pAry = document.getElementsByTagName("p");
  3.   for( var i=0; i<pAry.length; i++ ) {
  4.     (function () {
  5.       var temp = i;//调用时局部变量
  6.       pAry[i].onclick = function() {
  7.         alert(temp);
  8.       }
  9.     })();
  10.   }
  11. }

5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）

  1. function init5() {
  2.   var pAry = document.getElementsByTagName("p");
  3.   for( var i=0; i<pAry.length; i++ ) {
  4.    pAry[i].onclick = function(arg) {
  5.        return function() {//返回一个函数
  6.        alert(arg);
  7.      }
  8.    }(i);
  9.   }
  10. }

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

  1. function init6() {
  2.     var pAry = document.getElementsByTagName("p");
  3.     for( var i=0; i<pAry.length; i++ ) {
  4.       pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例
  5.     }
  6. }

7、用Function实现，注意与6的区别

  1. function init7() {
  2.     var pAry = document.getElementsByTagName("p");
  3.     for( var i=0; i<pAry.length; i++ ) {
  4.          pAry[i].onclick = Function('alert('+i+')')
  5.     }
  6. }

总结完成，欢迎拍砖！

javascript闭包传参和事件的循环绑定的更多相关文章

  1. javascript闭包传参就这么简单

    var query = (function (a) { return a; })('fx'); alert(query);

  2. 闭包传参 余额计算 钩子hook 闭包中的this JavaScript 钩子

    闭包传参  余额计算    钩子hook 小程序 a=function(e){console.log(this)}() a=function(e){console.log(this)}() VM289 ...

  3. webpack+vue 组件间传参(单一事件中心管理组件通信--$root)，如果有路由的话会失效

    先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...

  4. elementUi中的计数器ele-mumber中的change事件传参及事件调用

    业务场景是需要在点击业务工作量的时候设置任务工作量这一项的评分不能大于任务质量及任务时限的权重之和除以二 上代码 JS逻辑代码 因出现弹出层提示后设置输入框的值如果大于sum的值,设置输入的值为sum ...

  5. Javascript 函数传参问题

    属于传值,不能改变参数的属性 example 1  function Myvalue(){ var arry = 5; return arry ; } document.getElementById( ...

  6. 从一道面试题分析javascript闭包

    据说是一不注意就会做错的五道javascript面试题之一,我们来看看这道题长什么样 function Container( properties ) { var objthis = this; fo ...

  7. C# 线程传参

    传参方式有两种: 1.创建带参构造方法类 传参 2.利用Thread.start(8)直接传参,该方法会接收一个对象,并将该对象传递给线程,因此在线程中启动的方法 必须接收object类型的单个参数. ...

  8. 【WPF】CommandParameter解决多传参问题

    方法一:传参按钮控件自身绑定的ItemSource 用WAF框架实现MVVM,按钮的点击事件都要通过Command来传递到这个View对应的ViewModel上,再通过ViewModel传递到上层的C ...

  9. react-绑定this并传参的三种方式

    绑定this并传参的三种方式 在事件中绑定this并传参: <input type="button" value="在事件中绑定this并传参" onCl ...

随机推荐

  1. hdoj 3836 Equivalent Sets【scc&&缩点】【求最少加多少条边使图强连通】

    Equivalent Sets Time Limit: 12000/4000 MS (Java/Others)    Memory Limit: 104857/104857 K (Java/Other ...

  2. Android 开发60条技术经验总结(转)

    Android 开发60条技术经验总结: 1. 全部Activity可继承自BaseActivity,便于统一风格与处理公共事件,构建对话框统一构建器的建立,万一需要整体变动,一处修改到处有效. 2. ...

  3. 后台action处理数据传递给前台界面

    package com.renmai.util; import java.io.IOException; import javax.servlet.http.HttpServletResponse; ...

  4. 理解position 绝对定位和相对定位

    一.position的三种取值 1.取值 Position :   static /  absolute / fixed / relative static:静态   absolute:绝对定位    ...

  5. jquerymobile知识点：动态Grid的绑定以及刷新

    下面jquerymobile是ajax动态绑定和刷新的例子.直接上图以及代码. 下面是实例代码: //初始绑定 function GetInitBind(PageIndex, PageSize, sq ...

  6. java数组的拷贝四种方法：for、clone、System.arraycopy、arrays.copyof

    public class ArrayCopy{ public static void main(String []args){ int []a = {1,3,4,5}; toPrint(a); int ...

  7. SCTP 关联的建立和终止

    与TCP一样,SCTP也是面向连接的,因而也有关联的建立与终止的握手过程.不过SCTP的握手过程不同于TCP. 四路握手 建立一个SCTP关联的时候会发生下述情形(类似于TCP). (1)服务器必须准 ...

  8. j2ee学习笔记URLEncoder.encode(String , enc)处理特殊字符

    从页面上传递数据时,特殊字符对于超链接会自动进行解码 : 其他方式需要手动进行解码.

  9. iOS网络层架构设计分享

    前言 前些天帮公司做了网络层的重构,当时就想做好了就分享给大家,后来接着做了新版本的需求,现在才有时间整理一下. 之前的网络层使用的是直接拖拽导入项目的方式导入了AF,然后还修改了大量的源码,时隔2年 ...

  10. hdu2011java

    多项式求和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...