首頁 > web前端 > js教程 > 主體

javascript閉包傳參和事件的循環綁定範例探討_javascript技巧

WBOY
發布: 2016-05-16 16:52:01
原創
1031 人瀏覽過

今天看到一個javascript的題目,以常理循環綁定事件,但是得到的結果卻不是想要的。

複製程式碼 程式碼如下:

text


link
<script> <BR>var as = document.getElementsByTagName('a'); <BR>for ( var i = as.length; i--; ) { <BR>as[i].onclick = function() { <BR>alert(i); <BR>return false; <BR>} <BR>} <BR></script>

1.這個程式碼點擊連結彈出的i都是-1,這是為啥呢?

簡單來說就是函數變數作用域問題,如果把function() { alert(i); return false; } 當做一個函數a();a()內部未定義變數i,但是內部使用了,於是向外查找,找到for循環裡定義的i,點擊事件是for循環完畢後才開始執行的,執行完畢後i的值已經變成-1;所以每次彈出的都是-1;

2. 2個參數的for循環也不常見!疑惑?

  for(語句1,語句2,語句3){

    //todo

『 }
循環條件>通常說語句1、語句2、語句3都是可選的。

b.語句 2:

  通常語句 2 用於評估初始變數的條件。

  語句 2 同樣是可選的。

  如果語句 2 傳回 true,則循環再次開始,如果傳回 false,則循環將結束。

  提示:如果您省略了語句 2,那麼必須在迴圈內提供 break。否則循環就無法停下來。這樣有可能令瀏覽器崩潰。

c.關於 i--判斷:

  判斷i--true /false的時候是先判斷i再運算i--的。進入最後一次判斷i--的時候其實判斷i==0的時候,判斷後又執行了一次i--,for循環終止, 於是i的值變成了-1;

  var i = 1;

  !!i--;//ture

解決方法:



複製代碼 程式碼如下: var as = document.getElementsByTagName('a');
for ( var i = as.length; i--; ) {
(function (i){
as[i].onclick = function() {
alert(i);
return false;
}
})(i)
}


或:


複製程式碼 程式碼如下:
程式碼如下:


var as = document.getElementsByTagName('a');
for ( var i = as.length; i--; ) {
var a = function(i){
as[i].onclick = function( ) {
alert(i);
return false;
}
}
a(i);
}


其他網友7中解決方法demo: 程式碼如下:





閉包示範



產品一


產品二


產品三


產品四


產品五



相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板