JS IndexedDBクロージャー/内部関数

Question

この「ループ」では、クロージャー/インナー関数を使用してイベントの要素のキーを付けることができない理由を理解したいと思います。私はfor,whileのような他のループで何が起こるかを知っています...このような状況ではこのアプローチがうまくいかない本当の理由はわかりません。

Q：キーを直接渡すことができないのはなぜですか？与えられた例では

item.transaction(["itens"], "readonly").objectStore("itens").openCursor() 
       .onsuccess = function(e) { 
        var info = e.target.result; 
        if (info) { 


         var div = document.createElement("div"); 
         var img = document.createElement("img"); 
         var h2 = document.createElement("h2"); 

         img.src = "../imagens/misc/" + info.value.image; 
         h2.innerHTML = info.value.title; 
         div.appendChild(h2); 


         div.onclick = function() { 
    //always the lasy key. 
          console.log(info.key); 


         }; 

         div.appendChild(img); 
         box.appendChild(div); 

         info.continue(); 
        } 
       }; 

私は解決策のタイプは作品を知っている...

bt.onclick = (function(index) { 
     return function(){console.log('iterator: ' + index);} 
    })(i); 

with ({ n: i }) { 
bt.onclick = function(index) { 
    console.log('iterator: ' + n); 
}; 
} 

Answer 1

、あなたはカーソルの反復ごとにdiv.onclickを上書きしています。

console.log('overwriting onclick handler to log: ' + info.key); 
div.onclick = function() { 
    console.log(info.key); 
}; 

またはその代わりに、上書きしない：

何が起こっているのは、あなたがするそれを変更した場合に明確であるかもしれない

console.log('adding onclick listener to log: ' + info.key); 
div.addEventListener('click', function() { 
    console.log(info.key); 
}); 

これらの動作が異なるが、おそらくあなたは何を理解するのに役立ちます行っている。