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>
  • 相关阅读:
    【LeetCode】543. 二叉树的直径
    红色的眼睛黑色的心
    WinForm
    Windows地址栏的妙用
    C#
    WPF
    配置Notepad++万能调试
    盗取连接你wifi的人的qq
    Windows去除开始菜单图标背景
    解决Windows下文件无法删除的问题
  • 原文地址:https://www.cnblogs.com/jiangtian/p/self-run-function.html
Copyright © 2011-2022 走看看