下面的代码为我工作良好(firefox):

for (var i=0; i<3; i++) {
   element = new ...   // create your element
   element.counter = i;
   element.addEventListener('click', function(e){
        console.log(this.counter);
        ...            // another code with this element
   }, false);
}

输出:

0
1
2

可能不是最优的，但对于那些不精通js的人来说已经足够简单了。将调用addEventListener的函数放到它自己的函数中。通过这种方式，传递给它的任何函数值都保持自己的作用域，并且您可以尽可能多地迭代该函数。

示例我与文件读取，因为我需要捕捉和渲染图像和文件名的预览。在使用多文件上传类型时，我花了一段时间来避免异步问题。尽管上传了不同的文件，我还是会意外地在所有渲染中看到相同的“名称”。

最初，所有的readFile()函数都在readFiles()函数中。这导致了异步作用域问题。

    function readFiles(input) {
      if (input.files) {
        for(i=0;i<input.files.length;i++) {

          var filename = input.files[i].name;

          if ( /\.(jpe?g|jpg|png|gif|svg|bmp)$/i.test(filename) ) {
            readFile(input.files[i],filename);
          }
       }
      }
    } //end readFiles



    function readFile(file,filename) {
            var reader = new FileReader();

            reader.addEventListener("load", function() { alert(filename);}, false);

            reader.readAsDataURL(file);

    } //end readFile

Use

   el.addEventListener('click',
    function(){
        // this will give you the id value 
        alert(this.id);    
    },
false);

如果你想传递任何自定义值到这个匿名函数那么最简单的方法是

 // this will dynamically create property a property
 // you can create anything like el.<your  variable>
 el.myvalue = "hello world";
 el.addEventListener('click',
    function(){
        //this will show you the myvalue 
        alert(el.myvalue);
        // this will give you the id value 
        alert(this.id);    
    },
false);

在我的项目中完美地工作。希望这能有所帮助

someevar值应该只能在some_function()上下文中访问，而不能从侦听器的上下文中访问。 如果你想在监听器中拥有它，你必须这样做:

someObj.addEventListener("click",
                         function(){
                             var newVar = someVar;
                             some_function(someVar);
                         },
                         false);

并使用newVar代替。

另一种方法是从some_function()返回someVar值，以便在监听器中进一步使用它(作为一个新的本地变量):

var someVar = some_function(someVar);

如果我没有弄错的话，使用bind调用函数实际上创建了一个由bind方法返回的新函数。这将在以后给你带来问题，或者如果你想删除事件监听器，因为它基本上就像一个匿名函数:

// Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', myCallback);
someObject.removeEventListener('event', myCallback);

// Not Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', function() { myCallback });
someObject.removeEventListener('event', /* can't remove anonymous function */);

记住这一点。

如果你正在使用ES6，你可以按照建议做，但更干净一点:

someObject.addEventListener('event', () => myCallback(params));

这里还有另一种方法(它在for循环中工作):

var someVar = some_other_function();
someObj.addEventListener("click", 

function(theVar){
    return function(){some_function(theVar)};
}(someVar),

false);