Loop内のindepent mouseover addEventListener

Question

「オブジェクト」クラスを持つすべての要素に「addEventListener」を追加し、オブジェクトの端を変更するためにマウスが移動したときに追加します。

しかし、私は常にループの最後の要素を選択します。

There'sコード：

<div class='objeto' id='obj1'>obj1</div> 
<div class='objeto' id='obj2'>obj2</div> 
<div class='objeto' id='obj3'>obj3</div> 
<script type='text/javascript'> 
    var i; 
    var objetos = document.getElementsByClassName('objeto'); 
    for (i = 1; i<objetos.length+1; i++){ 
     id = 'obj'+i; 
     document.getElementById(id).addEventListener('mouseover',function(){ 
        borderObject(id); 
     }, false); 
    }; 
    function borderObject(id){ document.getElementById(id).style.border="4px solid red"; } 
</script> 

PD：この、ホバーが、私はあなたが関数に正しいIDを渡す必要がありますJavascriptを

Answer 1

でそれをしたい：私はCSSが存在することを知っていますborderObject(id);は常に最後のIDを渡し、現在クリックされたアイテムを渡す必要があります。

例

var i; 
 
var objetos = document.getElementsByClassName('objeto'); 
 
for (i = 1; i < objetos.length + 1; i ++){ 
 
    id = 'obj'+i; 
 
    document.getElementById(id).addEventListener('mouseover',function(e){ 
 
     borderObject(e.target.id); 
 
    }, false); 
 
}; 
 
function borderObject(id){ 
 
    document.getElementById(id).style.border = "4px solid red"; 
 
}

<div class='objeto' id='obj1'>obj1</div> 
 
<div class='objeto' id='obj2'>obj2</div> 
 
<div class='objeto' id='obj3'>obj3</div>

Answer 2

<div class='objeto'>obj1</div> 
<div class='objeto'>obj2</div> 
<div class='objeto'>obj3</div> 
<script type='text/javascript'> 
    var i; 
    var objetos = document.getElementsByClassName('objeto'); 
    for (i = 0; i<objetos.length; i++){ 
     objetos[i].addEventListener('mouseover',function(){ 
        borderObject(objetos[i]); 
     }, false); 
    }; 
    function borderObject(objetos){ objetos.style.border="4px solid red"; } 
</script> 

Answer 3

はforループの外側でホバー動作を定義 -

let addListener = function(id) {document.getElementById(id).addEventListener('mouseover', function(){ 
         borderObject(id); 
        }, false); 
       } 

var objetos = document.getElementsByClassName('objeto'); 
for (var i = 1; i < objetos.length + 1; i++){ 
    var id = 'obj'+i; 
    addListener(id) 
};