zoukankan      html  css  js  c++  java
  • 用类(function(){})()实现点击显示index索引值的详解

    code:

     1 <script type="text/javascript">
     2     for(var i = 0; i < 5; i++){
     3         var btn = document.createElement("button");
     4         btn.appendChild(document.createTextNode("button" + i));
     5         btn.addEventListener("click", (function(x){return function(){
     6             console.log(x);
     7         }})(i));
     8         document.body.appendChild(btn);
     9     }
    10 </script>

    浏览器显示:

    1,2,3,4,8,9,10不用解释。主要看5-7,实现点击出现对应索引的监听事件。

    它的运行过程大概是这样的:

    当文档载入的时候,for循环,输出4个按钮及按钮文本。此时为每个按钮绑定了一个click事件,当js执行到此处的时候,自执行函数执行,传入i值给参数x,返回一个匿名函数,该匿名函数被绑定给每个button,保存有x参。当点击的时候,该函数执行。

    其他实现方法:

    方法1:

    <script type="text/javascript">
    for(var i = 0; i < 5; i++){
    var btn = document.createElement("button");
    btn.appendChild(document.createTextNode("button" + i));
    btn.onclick = (function(x){return function(){
    console.log(x);
    }})(i);
    document.body.appendChild(btn);
    }
    }
    </script>

    方法2:

    <script type="text/javascript">
    for(var i = 0; i < 5; i++){
    var btn = document.createElement("button");
    btn.appendChild(document.createTextNode("button" + i));
    (function(x){btn.onclick = function(){
    console.log(x);
    }})(i);
    document.body.appendChild(btn);
    }
    }
    </script>
  • 相关阅读:
    文字对战小游戏~~~
    面向对象--类库、委托、is和as运算符、泛型集合
    推箱子
    算法训练 K好数
    用memset设置无穷大无穷小
    算法训练 关联矩阵
    未名湖边的烦恼
    数字三角形
    算法训练 最大最小公倍数
    算法训练 区间k大数查询
  • 原文地址:https://www.cnblogs.com/jiangtian/p/self-run-function.html
Copyright © 2011-2022 走看看