js迴圈繫結事件解決方案
阿新 • • 發佈:2019-02-14
相信大家都遇到過類似的問題,for迴圈繫結完事件最後執行的時候都是最後一個事件相同,比如這段程式碼
Java程式碼
點選的時候彈出的不是0 1 2 3 4,而是5。
解決方案也很多種,比如可以新建一個function設定一個私有方法,然後每次new一個object然後再繫結到它的方法上。
還有就是閉包,寫法相對簡單:
Java程式碼
就是每個迴圈加上閉包,然後設定一個臨時變數,問題解決。
Java程式碼
- <body>
- <ul id="list">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- </ul>
- <script>
-
var list_obj = document.getElementsByTagName('li'
- for (var i = 0; i <= list_obj.length; i++) {
- list_obj[i].onclick = function() {
- alert(i);
- }
- }
- </script>
- </body>
點選的時候彈出的不是0 1 2 3 4,而是5。
解決方案也很多種,比如可以新建一個function設定一個私有方法,然後每次new一個object然後再繫結到它的方法上。
還有就是閉包,寫法相對簡單:
Java程式碼
- <body>
-
<ul id="list"
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- </ul>
- <script>
- var list_obj = document.getElementsByTagName('li');
- for (var i = 0; i <= list_obj.length; i++) {
- (function(){
-
var p = i
- list_obj[i].onclick = function() {
- alert(p);
- }
- })();
- }
- </script>
- </body>
就是每個迴圈加上閉包,然後設定一個臨時變數,問題解決。