Javascript 循环中的独立鼠标覆盖addEventListener

我想在所有带有“object”类的元素上添加一个“addEventListener”，当鼠标移到上面改变对象的边缘时

但我总是选择循环中的最后一个元素

代码如下：

<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>

obj1
obj2
obj3
var i；
var objetos=document.getElementsByClassName（'objeto'）；
对于（i=1；i您需要向函数传递正确的id，此
borderObject（id）；
始终传递最后一个id，您需要传递当前单击的项

示例


vari；
var objetos=document.getElementsByClassName（'objeto'）；
对于（i=1；i

obj1
obj2
obj3
obj1
obj2
obj3
var i；
var objetos=document.getElementsByClassName（'objeto'）；
对于（i=0；i定义
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)
};

let addListener=function（id）{document.getElementById（id）.addEventListener（'mouseover'，function（）{
边界对象（id）；
}，假）；
}
var objetos=document.getElementsByClassName（'objeto'）；
对于（变量i=1；i

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)
};