写js的一些思路及问题 采集

Posted 2020-09-01 武侯668

1利用循环给元素添加事件(例子:点击li，弹出当前li 的索引)

错误案例：

 1 <ul id="testUL">
 2     <li> index = 0</li>
 3     <li> index = 1</li>
 4     <li> index = 2</li>
 5     <li> index = 3</li>
 6 </ul>
 7 <div id="box">123333</div>
 8 <script>
 9     var nodes = document.getElementsByTagName("li");
10     for(i = 0;i<nodes.length;i++){
11         console.log(nodes[i]);   // 可以循环打印。。。
12         nodes[i].onclick = function(){
13             // onsole.log(nodes[i]);   //undefined
14             console.log(i);//值全是4
15         };
16     }
17     var box = document.getElementById("box");
18     for(var j=0; j<5;j++){    //循环完成之后,才触发的事件。
19         box.onclick = function () {
20             console.log(j); //
21         }
22     }
23 </script>

 用闭包解决上述问题（正确案例）

 1 <ul id="testUL">
 2     <li> index = 0</li>
 3     <li> index = 1</li>
 4     <li> index = 2</li>
 5     <li> index = 3</li>
 6 </ul>
 7 <script>
 8     //循环绑定事件的时候闭包也很有用，关于闭包有个很经典的例子
 9     var add_the_handlers = function(nodes){
10         var helper = function(i){
11             return function(e){
12                 alert(i);
13             };
14         };
15         for(var i = 0;i<nodes.length;i++){
16             nodes[i].onclick = helper(i); //估计是点击的当前再传的值
17         }
18     };
19     add_the_handlers(document.getElementsByTagName("li"));
20 </script>