js中の循環バインディング処理プログラムに注意する必要があります.

1413 ワード


  
var allA = document.getElementsByTagName('div'); window.onload = function(){ for(var i = 0;i < allA.length;i++){ allA[i].onclick = function(){ console.log(allA[i]);//undefined i , console.log(this);//[object HTMLDivElement] {} console.log(i)//3 console.log(allA[i] == this)//false } console.log(i);//1、2、3 } }
どうしてですか?
forループはonloadが完了したらすぐ実行されるので、バインディングされたイベント関数は、ユーザがイベントをトリガした後に実行される.だからiを見た結果は3です.したがって、イベント関数をループバインドするときは、インデックスで現在のオブジェクトにアクセスしないでください.
その他のインデックス問題解決策
// 1、   function       ,             
var allA = document.getElementsByTagName('div');
window.onload = function(){
  for(var i = 0;i < allA.length;i++){
    allA[i].onclick = function(value){
      console.log(allA[value]);//[object HTMLDivElement] {}
      console.log(this);//[object HTMLDivElement] {}
      console.log(value)//0
      console.log(allA[value] == this)//true
    }(i)
    console.log(i);//1、2、3
  }
}



// 2、  、        , forEach
var Tag = document.getElementsByTagName('div');
var allA = Object.keys(Tag)
window.onload = function(){
  allA.forEach(function(ele,i){
    Tag[i].onclick = function(){
      console.log(Tag[i]);//[object HTMLDivElement] {}
      console.log(i)//0
    }
    console.log(i);//1、2、3
  });  
}