【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
