循环中的独立鼠标悬停 addEventListener

Question

我想在所有带有 "object" class 的元素上添加一个 "addEventListener" 并且当鼠标移到该对象上时更改对象的边缘。

但我总是select循环中的最后一个元素。

有代码：

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

循环中的独立鼠标悬停 addEventListener

Indepent mouseover addEventListener in a Loop

javascript

for-loop

mouseover

addeventlistener