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

  • 相关阅读:
    Vue-CLI项目-axios模块前后端交互(类似ajax提交)
    Vue-CLI项目中路由传参
    HTML标签嵌套规则
    POJ1050 To the Max
    POJ2488 A Knight's Journey
    POJ1083 Moving Tables
    洛谷P1265 公路修建
    POJ2236 Wireless Network
    洛谷P1991 无线通讯网
    POJ1018 Communication System
  • 原文地址:https://www.cnblogs.com/heyang78/p/15652260.html
Copyright © 2011-2022 走看看