【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

posted @ 2021-12-06 22:39  不朽的飞翔  阅读(71)  评论(0)    收藏  举报