调用事件侦听器 - 两种方式之一工作，有什么不同？

Question

这种方式不起作用（元素从函数中拉出来）。

function styleTwitter1(pair_array) 
    { 
     var i; 
     var input; 
     var label; 
     var font_size; 

     for (i = 0; i < pair_array.length; i+=2) 
     { 
/* 
*/ 
      input = document.getElementById(pair_array[ i ]); 
      label = document.getElementById(pair_array[ i + 1 ]); 
/* 
*/ 
      label.fontSize = window.getComputedStyle(label, null).getPropertyValue("font-size"); 
/* 
*/ 
      input.addEventListener("keypress", function() 
      { 
       label.style.opacity = 0; 
      }, false); 
/* 
*/ 
      input.addEventListener("focus", function() 
      { 
       if(input.value === '') 
       { 
        label.style.opacity = 0.2; 
        input.style.border = '1px solid #888888'; 
       } 
      } , false); 
/* 
*/ 
      input.addEventListener("blur", function() 
      { 
       if(input.value === '') 
       { 
        label.style.opacity = 1; 
        new EffectsFont(label).fade('up', 150); 
        input.style.border = '1px solid #dddddd'; 
       } 
      } , false); 
/* 
*/ 
     } 
    } 

但是，这样做（元素是从函数外部注入的）。

function initTwitterStyle(input, label) 
    { 
/* 
*/ 
     input.addEventListener("keypress", function() 
     { 
      label.style.opacity = 0; 
     }, false); 
/* 
*/ 
     input.addEventListener("focus", function() 
     { 
      if(input.value === '') 
      { 
       label.style.opacity = 0.2; 
       input.style.border = '1px solid #888888'; 
      } 
     }, false); 
/* 
*/ 
     input.addEventListener("blur", function() 
     { 
      if(input.value === '') 
      { 
       label.style.opacity = 1; 
       new EffectsFont(label).fade('up', 150); 
       input.style.border = '1px solid #dddddd'; 
      } 

     }, false); 
/* 
*/ 
    } 

我最终会做，如果我不能想出不同的是外面拉我的阵列循环，只是与元素注入twitterStyle2。

目前，我不能得到一个错误代码，但只有一对正在初始化..然后EffectsFont不起作用。

Jshint警告不要在循环中创建函数，但我不明白为什么？什么是问题？

Answer 1

我称之为冻结一个闭包变量，基本上是通过使用自调用函数创建一个不共享的新闭包。

var divs = [...]; 
for (var i=0; i < 10; i++) { 
    // Here's the self calling function 
    div.onclick = (function(i){ 
    return function() { 
     console.log("Clicked div with index" + i); 
    } 
    })(i);// Passing the variable to the self calling function creating a new closure 
} 

我的首选方式，但是，就是用https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

var divs = [...]; 
for (var i=0; i < 10; i++) { 
    div.onclick = (function(i) { 
     console.log("Clicked div with index" + i + "and id" + this.id); 
    } 
    }).bind(div, i); 
} 

Answer 2

您有关闭问题。处理程序在变量label上关闭。但是，当循环完成时，label将是最后一个元素 - 所有处理程序将把它们视为最后一个元素。