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

Question

我有以下code:

var abbrs = document.getElementsByClassName("hover");
abbrs.onmouseover=function() {
     console.log(this);
};

当我将鼠标悬停在具有“hover”类的元素上时，它应该会触发，但它不起作用。 我做错了什么？

Answer 1

顾名思义，document.getElementsByClassName 返回一个元素列表，其中 hover 作为它们的类名，因此您可以这样做:

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.length,
  abbrs = document.getElementsByClassName("hover");

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

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