zoukankan      html  css  js  c++  java
  • 【JS】使用自执行函数和闭包实现给链接动态的绑定事件

    遍历列表,找出id,然后添加修改删除链接有多种实现方法,其中一种就是利用自执行函数+闭包形成id不同的链接。

    常见实现方法:

    <!DOCTYPE html>
    <html lang="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <head>
         <title>标题</title>
         <style type="text/css">
         #myul{
            list-style:none;
            padding:0;
            margin:0;
         }
    
         </style>
        </head>
    
         <body>
            <ul id="myul">
            </ul>
         </body>
    </html>
    <script type="text/javascript">
    <!--
        createLinks(9);
    
        function createLinks(cnt){
            for(var i=0;i<cnt;i++){
                var a=document.createElement("a");
    
                a.onclick=(function(numInMemory){
                    return function(){
                        alert(numInMemory);
                    }
                })(i);
    
    
                a.appendChild(document.createTextNode("a"+i));
    
                var li=document.createElement("li");
                li.appendChild(a);
    
                var ul=document.getElementById("myul");
                ul.appendChild(li);
            }
        }
    
    //-->
    </script>

    上面粗体字为核心代码。

    这段代码因为混杂了自执行函数和闭包,写法显得怪异,并不容易理解,但下面这个实现效果一致的代码能帮您一把。

    <!DOCTYPE html>
    <html lang="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <head>
         <title>标题</title>
         <style type="text/css">
         #myul{
            list-style:none;
            padding:0;
            margin:0;
         }
    
         </style>
        </head>
    
         <body>
            <ul id="myul">
            </ul>
         </body>
    </html>
    <script type="text/javascript">
    <!--
        function test(b){
            return function(){
                alert(b);
            }
        }
    
        //test(5)();
        createLinks(9);
    
        function createLinks(cnt){
            for(var i=0;i<cnt;i++){
                var a=document.createElement("a");
    
                a.onclick=test(i);
    
                a.appendChild(document.createTextNode("a"+i));
    
                var li=document.createElement("li");
                li.appendChild(a);
    
                var ul=document.getElementById("myul");
                ul.appendChild(li);
            }
        }
    
    //-->
    </script>

    以上粗体是核心部分,test函数的目的是为了构建出一个闭包环境,即函数里返回函数,被返回的函数内部使用的局部变量自动成为被返回函数的环境,而不会随着自执行函数的调用完毕而销毁。

    对比后知道,test就和自执行函数

    function(numInMemory){
        return function(){
            alert(numInMemory);
        }
    }

    是等效的。

    END

  • 相关阅读:
    centos查看apache用的是哪个httpd.conf
    window下安装composer and yii2
    安装xampp后,出现“Apache 2 Test Page powered by CentOS“
    PHP高效率写法
    银联接口(注意项&备忘)
    多行文本溢出
    javascript数据基本定义以及对象{}和数组[]的含义和使用
    用CSS3的animation轻松实现背景动画:漂浮的云
    巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
    NBA篮球足球在线直播插件下载
  • 原文地址:https://www.cnblogs.com/heyang78/p/15652260.html
Copyright © 2011-2022 走看看