這裡是記錄一些本人在學習過程中覺得重要的知識點，記錄下來以供日後查看，如有不對歡迎指正，望在前端的路上共勉！ 當然，這裡也不僅僅局限於點擊事件，也可以換成setTimeout等也有相同的問題，可以用這兩種方法來解決； ...
這裡是記錄一些本人在學習過程中覺得重要的知識點，記錄下來以供日後查看，如有不對歡迎指正，望在前端的路上共勉！
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <!-- 在頁面添加三個按鈕 -->
9 <input type="button" value="1">
10 <input type="button" value="2">
11 <input type="button" value="3">
12
13
14 <script>
15 // 獲取頁面所有的input
16 var aBtn = document.getElementsByTagName('input');
17
18 // 迴圈綁定點擊事件,當然毫無疑問這裡點擊之後會彈出3，
19 //因為我們知道js是單線程的，當基本邏輯語句執行完之後，才會執行點擊事件
20 //而當你觸發點擊事件的時候，for迴圈都已經跑完了，所以i已經變成了3；
21 for(var i = 0; i < aBtn.length; i++){
22 aBtn[i].onclick = function(){
23 alert(i);
24 }
25 }
26
27 // 解決方法1:也是最簡單的方法，就是將for迴圈的var變成let
28 //這樣當點擊每個按鈕的時候，就會依次彈出0,1,2；
29 //let是ES6新增的一個變數聲明方式，擁有塊級作用域；
30 for(let i = 0; i < aBtn.length; i++){
31 aBtn[i].onclick = function(){
32 alert(i);
33 }
34 }
35
36 //解決方法2：利用閉包(說是閉包，貌似也不完全是)，也就是函數作用域訪問原則的特性
37 //函數內部可以訪問外部的變數，外部卻訪問不了裡邊的；
38 for(var i = 0; i < aBtn.length; i++){
39 (function(i){
40 aBtn[i].onclick = function(){
41 alert(i);
42 }
43 })(i);
44 }
45 </script>
46 </body>
47 </html>
當然，這裡也不僅僅局限於點擊事件，也可以換成setTimeout等也有相同的問題，可以用這兩種方法來解決；
