Javascript addEventListener：让变量持续存在答案

【问题标题】：Javascript addEventListener: Getting variable to persist with itJavascript addEventListener：让变量持续存在
【发布时间】：2012-12-31 17:44:32
【问题描述】：

我目前正在学习 Javascript，现在我正在搞乱事件监听器。

但是我有一个问题，当我在循环中创建事件侦听器时，我无法弄清楚如何将一个持续存在的变量传递给它。我制作了一个脚本，当我单击它时将元素移动到指定位置。但是现在它将所有元素放在同一个位置，所以出于某种原因，它们都得到了相同的数字。

不管我这样传入：

var index = i;    

applications[i].addEventListener('click', function(){ 

 
var posLeft2 = 10*index+"%";

 var iconstyleO =  " text-align: center; "+
" font: bold 22px Tahoma; "+
" position:fixed; "+
" top: 67%; "+
" left: "+posLeft2+"; "+
" display:block; "+
" margin: 150px auto; "+
" color: #ffffff; "+
" z-index: 3; "+
" -webkit-border-radius: 10px; "+
" background: rgb(140,140,140); "+
" width: 10%; "+
" height: 10%; ";

this.setAttribute('style',iconstyleO); 
     }  ,false);

或者像这样：

var index = i;    

applications[i].addEventListener('click', function(index){ 

 
var posLeft2 = 10*index+"%";

 var iconstyleO =  " text-align: center; "+
" font: bold 22px Tahoma; "+
" position:fixed; "+
" top: 67%; "+
" left: "+posLeft2+"; "+
" display:block; "+
" margin: 150px auto; "+
" color: #ffffff; "+
" z-index: 3; "+
" -webkit-border-radius: 10px; "+
" background: rgb(140,140,140); "+
" width: 10%; "+
" height: 10%; ";

this.setAttribute('style',iconstyleO); 
     }  ,false);

他们仍在将事件监听器设置为相同的位置。要么在最后一个元素位置，要么在第一个元素位置，这取决于我尝试传递它的方式。

有什么想法吗？

【问题讨论】：

标签： javascript html dom-events addeventlistener

【解决方案1】：

Javascript 没有块作用域。
因此，您所有的回调都共享同一个变量。

要解决此问题，您需要将代码包装在 IIFE 中，以便每个回调都有自己的闭包：

(function(index) {
    applications[i].addEventListener('click', function(){ 
        ...
    });
})(i);

【讨论】：

谢谢！像魅力一样工作！除夕快乐！