Indepent鼠标悬停的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：我知道CSS存在：徘徊，但我想用javascript

Answer 1

做到这一点，您需要正确的ID传递给函数，这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) 
};