Javascript第六章闭包closure规则第三课

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">//在一个函数内部又定义一个函数/*function f1(){var n=99;function f2(){//只是定义函数，必须调用才会执行console.log(n); //在内部函数f2中可以访问到函数f1中的局部变量n}//f2();return f2; //返回函数f2}var fn=f1();fn();*/function doAdd(){for(var i=1;i<=5;i++){//方式一：会产生闭包问题/*var btn=document.createElement("input");btn.type="button";btn.value="按钮"+i;btn.function(){console.log("点击了按钮"+i);};$("mydiv").appendChild(btn);*///方式二：不在函数内部定义函数//$("mydiv").appendChild(createButton(i));//方式三：为元素附加属性var btn=document.createElement("input");btn.type="button";btn.value="按钮"+i;btn.num=i; //存储数据btn.onclick=function(){console.log("点击了按钮"+this.num);};$("mydiv").appendChild(btn);}}function createButton(num){var btn=document.createElement("input");btn.type="button";btn.value="按钮"+num;btn.onclick=function(){console.log("点击了按钮"+num);};return btn;}function $(id){return document.getElementById(id);}</script>
</head>
<body><input type="button" value="向div中添加多个按钮" onclick="doAdd()" ><div id="mydiv"></div>
</body>
</html>

难点：通过为元素自创一个属性，达到存储数据的目的

可以随便定义属性，不影响输出结果

Javascript第六章闭包closure规则第三课相关推荐

Javascript第六章基本包装类型第八课
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Javascript第四章变量的作用域第三课
更多免费教学文章请关注这里注:没有使用Var 声明的都是全局变量,不论在方法里还是方法外就近原则,输出的方法里的局部变量如果你想访问全局变量你可以用window 或者this 前缀因为win ...
Javascript第六章JavaScript字面量加数组创建对象第三课
Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...
Javascript第六章JavaScript中构造器创建对象第二课
Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...
Javascript第六章JavaScript用new创建对象第一课
Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...
Javascript第六章世上最全常用RegExp正则表达式及表单验证源码第七课
元字符: 很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求.所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下.给自己留个底,也给朋友们 ...
Javascript第六章计时器练习【源码】第四课
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Javascript第六章基本数据类型和引用数据类型第三课
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Javascript第六章prototype原型向构造器中添加属性，实现构造器共享，节约空间第五课
/*function Student(name,age){this.name=name;this.age=age;this.show=function(){console.log("我是一个 ...

Javascript第六章闭包closure规则第三课

Javascript第六章闭包closure规则第三课相关推荐

最新文章

热门文章