Javascript 具有相同类名的多个元素的事件

我有以下几点

当我将鼠标悬停在类为“hover”的元素上时，它应该会触发，但它不起作用。

---

我做错了什么？

顾名思义

document.GetElementsByCassName

返回元素列表，将

悬停

作为它们的类名，因此您可以像这样做：

var i=0,
  len = abbrs.length,
  abbrs = document.getElementsByClassName("hover");

for( ; i < len ; i++){
    abbrs[i].addEventListener("mouseover", function(event){
        //...
    });
}

var i=0，
len=缩写长度，
abbrs=document.getElementsByClassName（“悬停”）；
对于（；i

虽然它回答了这个问题，但就更好的编码实践而言，我们最好避免在循环中创建函数。因此，更好的做法可能是这样：

var i=0,
  len = abbrs.length,
  abbrs = document.getElementsByClassName("hover");

fnction addEvent(abbr){
    abbr.addEventListener("mouseover", function(event){
        //...
    });
}

for( ; i < len ; i++){
    addEvent(abbrs[i]);
}

var i=0，
len=缩写长度，
abbrs=document.getElementsByClassName（“悬停”）；
fnction addEvent（缩写）{
缩写为addEventListener（“鼠标悬停”，函数（事件）{
//...
});
}
对于（；i

document.getElementsByClassName根据当前浏览器和版本返回节点列表或HTMLCollection

要将事件侦听器添加到“abbrs”集合/列表中的所有项，您需要执行以下操作：

for(i=0; i< abbrs.length; i++) {
  abbrs[i].onmouseover=function() {...};
}

请参阅下面的代码（我假设您没有使用jquery）

var abbrs=document.getElementsByClassName（“悬停”）；
var指数，l=缩写长度；
对于（索引=0；索引

console.log（缩写）

Then read您没有遍历节点列表并将事件处理程序绑定到每个元素。谢谢。我忘了那个“小”细节

for(i=0; i< abbrs.length; i++) {
  abbrs[i].onmouseover=function() {...};
}

$(".hover").on("mouseover", function() {...});

    var abbrs = document.getElementsByClassName("hover");

    var index,l=abbrs.length;
    for (index = 0; index < l; ++index) {
        console.log(abbrs[index]);
        abbrs[index].onmouseover = function() {
            console.log(this);
        }
    }