Javascript AJAX addEventListener-将参数传递给另一个函数

我将保持简短—我有一个使用循环创建的

按钮列表，当其中一个按钮被单击时，我希望能够将其id属性传递给另一个文件，以便动态生成新页面

代码如下：

for (var i in data.contacts) {  
    var temp = document.createElement('div'); 
    temp.className = "contacts"; 
    var dude = document.createElement('input');
    dude.type = "button"; 
    dude.value = data.contacts[i];
    dude.id = data.contacts[i]; 
    dude.className = "dude_button" + data.contacts[i]; 

    dude.addEventListener('click', function(event) { gotoProfile(dude.id); }, false); 


    temp.appendChild(dude); 
    temp.appendChild(document.createElement('br'));
    theDiv.appendChild(temp); 

}
// and now in another file, there's gotoProfile():

function gotoProfile(x) {
var username = document.getElementById(x).value;  

if (xmlHttp) {
    try { 
.... etc.

现在看，这是可行的，但问题是当我单击任何按钮时，它只传递列表
data.contacts
中最后一个
dude.id
值。显然，我希望每个按钮的
addEventListener
都传递自己的
数据。联系人[I]
值，而不仅仅是最后一个

感谢大家的帮助。
因为JavaScript没有块作用域，
dude
将在调用事件处理程序时引用最后分配的元素（因为循环已完成）。您必须
捕获对当前
dude
的引用，例如使用即时功能：

dude.addEventListener('click', (function(d) {
    return function(event) { 
        gotoProfile(d.id); 
    }
}(dude)), false);

这是在循环中创建函数时的常见错误


但你可以让它变得更容易。
event
对象有一个属性
target
，该属性指向引发事件的元素。所以你可以做：

dude.addEventListener('click', function(event) { 
    gotoProfile(event.target.id); 
}, false); 

话虽如此，您不需要为每个按钮添加处理程序。当您对每个按钮执行相同的操作时，您可以将上面相同的事件处理程序附加到按钮的父级（或公共祖先），并且它仍然可以工作。您只需过滤掉按钮上未出现的点击：

parent.addEventListener('click', function(event) { 
    if(event.target.nodeName == 'INPUT' && event.target.type == "button") {
        gotoProfile(event.target.id); 
    }
}, false);