【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:35 逆火狂飙阅读(116) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

2025年3月

日

一

二

三

四

五

六

【JS】使用自执行函数和闭包实现给链接动态的绑定事件

常用链接

最新随笔

积分与排名

随笔分类 (2323)

个人常用链接

最新评论