В чем разница между этими двумя утверждениями?

Question

 var tr = document.getElementsByTagName('tr'); 
     tr[0].onmouseover = function(){ 
      tr[0].style.backgroundColor = '#ccc'; 
     } 
     tr[1].onmouseover = function(){ 
      tr[1].style.backgroundColor = '#ccc'; 
     } 
     tr[2].onmouseover = function(){ 
      tr[2].style.backgroundColor = '#ccc'; 
     } 

Первое право, но когда я использую цикл for, как в следующем фрагменте кода, я получаю «Uncaught TypeError: Cannot read property 'style' of undefined».

 var tr = document.getElementsByTagName('tr'); 
     for(var i=0;i<tr.length;i++){ 
      tr[i].onmouseover = function(){ 
      tr[i].style.backgroundColor = '#ccc'; 
      }    
     } 

Answer 1

Вам нужно обновить с

tr[i].onmouseover = function(){ 
    tr[i].style.backgroundColor = '#ccc'; 
} 

в

tr[i].onmouseover = function(event){ 
    event.currentTarget.style.backgroundColor = '#ccc'; 
} 

Проблема - К тому времени, когда вы пытаетесь получить доступ к tr[i] в значении обработчик события i был обновлен до 3 и поэтому произошла ошибка