Question

我有以下code:

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

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

Answer 1

顾名思义document.getElementsByClassName返回一个元素列表，其中hover为className，因此您可以这样做：

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

Answer 2

document.getElementsByClassName返回NodeList或HTMLCollection，具体取决于您当前的浏览器和版本。

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

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

或者，使用jQuery：

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

Answer 3

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

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

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

3 个答案: