需要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 ++”中设置的最新值。