需要jQuery的Event.data例子說明

Question

我的問題是關於這個頁面上的例子：http://api.jquery.com/event.data/

<button> 0 </button> 
<button> 1 </button> 
<button> 2 </button> 
<button> 3 </button> 
<button> 4 </button> 

<div id="log"></div> 

JS：

var logDiv = $("#log"); 

for (var i = 0; i < 5; i++) { 
    $("button").eq(i).on("click", { value: i }, function(event) { 
    var msgs = [ 
     "button = " + $(this).index(), 
     "event.data.value = " + event.data.value, 
     "i = " + i 
    ]; 
    logDiv.append(msgs.join(", ") + "<br>"); 
    }); 
} 

在本演示中，當我點擊一個按鈕，輸出是這樣的：

按鈕= 0，event.data.value = 0，I = 5

什麼我不明白爲什麼「我= 5」在這裏，不應該在這種情況下「我」等於「0」？

Answer 1

這是因爲i當你做"i = " + i是相同i該公司在for循環遞增你引用。

當循環結束，當你點擊事件終於引發，i將一直當你把它作爲event.data遞增到5，你是「捕獲」的電流值，所以這就是爲什麼你得到0

Answer 2

這就是要點。代碼運行時，會設置五個不同的事件處理程序。這是第一個事件處理程序看起來像看JS引擎的點是什麼：

$("button").eq(0).on("click", {value: 0}, function(event) { /* i set to zero */ 
    var msgs = [ 
     "button = " + $(this).index(), 
     "event.data.value = " + event.data.value, /* passed in via {value: 0} */ 
     "i = " + i /* i remains a variable inside the callback function */ 
    ]; 
    logDiv.append(msgs.join(", ") + "<br>"); 
    }); 

注意i沒有被設置爲回調函數內爲零;它仍然是一個變量。並且在調用事件處理程序時（單擊該按鈕時），for循環完成並且i=5。

---

要做到你想象的要發生什麼，我們就需要包裝在closure環路內側：

for (var i = 0; i < 5; i++) { 
    (function (i) { /* start of closure */ 
     $("button").eq(i).on("click", function (event) { 
      var msgs = [ 
       "button = " + $(this).index(), 
       "i = " + i]; 
      logDiv.append(msgs.join(", ") + "<br>"); 
     }); 
    })(i); /* end of closure */ 
} 

http://jsfiddle.net/mblase75/qeXn5/

...或者只是使用event.data.value而不是i。

Answer 3

事件監聽器持有對for語句中使用的「i」變量的引用。在for循環結束並且所有「click」偵聽器被添加後，該值將爲5：這是在條件「i < 5」失敗之前在「i ++」中設置的最新值。