事件具有相同的类名

Question

多个元素，我有以下code:

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

当我将鼠标悬停在与类“悬停”的元素，它应该触发，但它不工作。 我在做什么错？

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

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