AJAX addEventListener - 別の関数にパラメータを渡す

Question

これを短くしておきます - buttonsのリストがあります。ループを使用して作成します。そのうちの1つがクリックされると、その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が最後のものではなく、data.contacts[i]の値を渡すようにしたいと思います。

ありがとう、ありがとうございます。

Answer 1

JavaScriptにはブロックスコープがないため、dudeは、イベントハンドラが呼び出されたときに（ループが終了したため）最後に割り当てられた要素を参照します。あなたはcaptureを現在の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); 

ボタンで発生しないクリックを除外するだけで済みます。